diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..58b06ba5f0c38bf9ee1feae41b8c094b1e4e1a75
Binary files /dev/null and b/.DS_Store differ
diff --git a/screencoder/UIED/config/__pycache__/CONFIG_UIED.cpython-312.pyc b/screencoder/UIED/config/__pycache__/CONFIG_UIED.cpython-312.pyc
index ee8041b11a4ebc31f4c9b8a1c117ad82671669d9..e00acaeb57ade31c982100dd4aaaec6eb0045365 100644
Binary files a/screencoder/UIED/config/__pycache__/CONFIG_UIED.cpython-312.pyc and b/screencoder/UIED/config/__pycache__/CONFIG_UIED.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/__pycache__/ip_region_proposal.cpython-312.pyc b/screencoder/UIED/detect_compo/__pycache__/ip_region_proposal.cpython-312.pyc
index a3d107f53ca6d7ec4bc8cfe55fd4df27fc5127c4..68390c69829d2a9a117cbaffb96f6f1cc8384190 100644
Binary files a/screencoder/UIED/detect_compo/__pycache__/ip_region_proposal.cpython-312.pyc and b/screencoder/UIED/detect_compo/__pycache__/ip_region_proposal.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/Bbox.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/Bbox.cpython-312.pyc
index 2facea8edf53d8476fe94ecb1e2f1624b47501e2..583b94ad541be583d4a231c993715bccda62fff6 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/Bbox.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/Bbox.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/Component.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/Component.cpython-312.pyc
index e9c225076110074e6c0ea581249fb86c4ed7e479..a67cdf17b752317378b883c49edbf51cb73c8a66 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/Component.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/Component.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/file_utils.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/file_utils.cpython-312.pyc
index ae64b26b15e7d43e9c183fbdba708cd4e702f408..e8cba7a3b2c9092f6cdb4becd0b44b17280fad29 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/file_utils.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/file_utils.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_detection.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_detection.cpython-312.pyc
index 8e5bda730baee53867c1b69eacdd90c585cdc2fa..beedd54e058e484b2f9b4cae88c5d7f81addbd20 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_detection.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_detection.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_draw.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_draw.cpython-312.pyc
index b350e468e017de37185f7ae53bbdc3a84248cd6c..e1facd9c940a0ec1e0a58eda482617c893d87288 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_draw.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_draw.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_preprocessing.cpython-312.pyc b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_preprocessing.cpython-312.pyc
index 6f80d4913517e0aa5a264678ecb918dfee13568a..914b8eb6fea6adcd1cf33a9440614eb5f3d82c58 100644
Binary files a/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_preprocessing.cpython-312.pyc and b/screencoder/UIED/detect_compo/lib_ip/__pycache__/ip_preprocessing.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_text/__pycache__/Text.cpython-312.pyc b/screencoder/UIED/detect_text/__pycache__/Text.cpython-312.pyc
index 040197a4ba2450a9e2af91f7d18ede887ac50bc5..df5f3593d2a9edc13479cf0432aa2bc126451be8 100644
Binary files a/screencoder/UIED/detect_text/__pycache__/Text.cpython-312.pyc and b/screencoder/UIED/detect_text/__pycache__/Text.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_text/__pycache__/ocr.cpython-312.pyc b/screencoder/UIED/detect_text/__pycache__/ocr.cpython-312.pyc
index 8c688ba6209fabf426fda69511557e0c190024c2..1a9b7abb908a2cd846124bb089b643d10ab14e44 100644
Binary files a/screencoder/UIED/detect_text/__pycache__/ocr.cpython-312.pyc and b/screencoder/UIED/detect_text/__pycache__/ocr.cpython-312.pyc differ
diff --git a/screencoder/UIED/detect_text/__pycache__/text_detection.cpython-312.pyc b/screencoder/UIED/detect_text/__pycache__/text_detection.cpython-312.pyc
index b418de61aa6f81ea075ed2dc5cab1515708acf05..3cb349313ad046eb900bdd18f3036698aaab1c1f 100644
Binary files a/screencoder/UIED/detect_text/__pycache__/text_detection.cpython-312.pyc and b/screencoder/UIED/detect_text/__pycache__/text_detection.cpython-312.pyc differ
diff --git a/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout.html b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..ff31386c0a2fbf8291be861ec5c537986dee882b
--- /dev/null
+++ b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+  <meta charset="utf-8"/>
+  <title>
+   Bounding Boxes Layout
+  </title>
+  <style>
+   body, html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+            .container { 
+                position: relative;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+            }
+            .box {
+                position: absolute;
+                box-sizing: border-box;
+                overflow: hidden;
+            }
+            .box > .container {
+                display: grid;
+                width: 100%;
+                height: 100%;
+            }
+  </style>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
+ </head>
+ <body>
+  <div class="container">
+   <div class="box" id="1" style="left: 0.0%; top: 0.0%; width: 2.998812351543943%; height: 99.76608187134502%;">
+    <div class="flex flex-col items-center space-y-6 p-4">
+     <div class="flex items-center">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+       <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+      </svg>
+     </div>
+     <div class="flex items-center space-x-2">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+       <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a2 2 0 002 2H5a2 2 0 00-2-2V10a2 2 0 012-2h1a1 1 0 011 1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+      </svg>
+      <span>
+       首页
+      </span>
+     </div>
+     <div class="flex items-center space-x-2">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+       <path d="M15.536 8.464a5 5 0 017.072 7.072l-1.414 1.414a1 1 0 01-1.414-1.414l1.414-1.414a3 3 0 00-4.242-4.242l-1.414 1.414a1 1 0 01-1.414-1.414l1.414-1.414a5 5 0 010-7.072z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+       <path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+      </svg>
+      <span>
+       Shorts
+      </span>
+     </div>
+     <div class="flex items-center space-x-2">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+       <rect height="14" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="5">
+       </rect>
+       <path d="M8 10l4 2 4-2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+      </svg>
+      <span>
+       订阅
+      </span>
+     </div>
+     <div class="flex items-center space-x-2">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+       <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+       <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+       </path>
+      </svg>
+      <span>
+       我
+      </span>
+     </div>
+    </div>
+   </div>
+   <div class="box" id="2" style="left: 3.1769596199524943%; top: 0.0%; width: 96.7042755344418%; height: 8.362573099415204%;">
+    <div class="flex flex-col">
+     <div class="flex items-center justify-between bg-white p-2">
+      <div class="flex items-center">
+       <div class="bg-red-600 text-white rounded-l-md p-1">
+        ▶
+       </div>
+       <span class="text-xl font-bold ml-1">
+        YouTube
+       </span>
+       <span class="text-sm text-gray-600 ml-1">
+        HK
+       </span>
+      </div>
+      <div class="flex-1 mx-4">
+       <div class="flex">
+        <input class="w-full border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none" placeholder="搜索" type="text"/>
+        <button class="border border-gray-300 rounded-r-md bg-gray-100 px-3 py-1">
+         🔍
+        </button>
+        <button class="ml-2 bg-gray-100 rounded-md px-2 py-1">
+         🎤
+        </button>
+       </div>
+      </div>
+      <div class="flex items-center">
+       <button class="flex items-center bg-gray-100 rounded-md px-3 py-1 mr-4">
+        +
+        <span class="ml-1">
+         创建
+        </span>
+       </button>
+       <div class="mr-4">
+        🔔
+       </div>
+       <div class="bg-green-700 text-white rounded-full p-2 text-xl">
+        Y
+       </div>
+      </div>
+     </div>
+     <div class="flex overflow-x-auto whitespace-nowrap bg-white p-2">
+      <button class="bg-black text-white rounded-md px-3 py-2 mr-2">
+       全部
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       播客
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       游戏
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       直播
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       数学
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       篮球
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       足球
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       动画
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       最近上传
+      </button>
+      <button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       发现新视频
+      </button>
+     </div>
+    </div>
+   </div>
+   <div class="box" id="3" style="left: 3.1769596199524943%; top: 6.666666666666667%; width: 63.59857482185273%; height: 3.625730994152047%;">
+    <div class="flex items-center space-x-2">
+     <div class="bg-black text-white px-4 py-2 rounded-md">
+      全部
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      播客
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      游戏
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      直播
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      数学
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      篮球
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      足球
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      动画
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      最近上传
+     </div>
+     <div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      发现新视频
+     </div>
+    </div>
+   </div>
+   <div class="box" id="4" style="left: 3.1769596199524943%; top: 10.584795321637428%; width: 96.49643705463184%; height: 89.18128654970761%;">
+    <div class="grid grid-cols-3 gap-4">
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       26:24
+      </span>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        The Key Equation Behind Probability
+       </h2>
+       <div class="flex items-center text-xs text-gray-500 mt-1">
+        <img alt="channel" class="w-4 h-4 rounded-full mr-1" src="placeholder.png"/>
+        <span>
+         Artem Kirsanov
+         <span class="text-blue-600">
+          ✔
+         </span>
+        </span>
+       </div>
+       <p class="text-xs text-gray-500 mt-1">
+        27万次观看 · 10个月前
+       </p>
+      </div>
+     </div>
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       49:40
+      </span>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        Statistical mechanics of extensive-width shallow neural networks near interpolation
+       </h2>
+       <div class="flex items-center text-xs text-gray-500 mt-1">
+        <div class="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center text-white text-xs mr-1">
+         QLS
+        </div>
+        <span>
+         ICTP Quantitative Life Sciences
+        </span>
+       </div>
+       <p class="text-xs text-gray-500 mt-1">
+        48次观看 · 22小时前
+       </p>
+      </div>
+     </div>
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       11:51
+      </span>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        Wall Street Quant interview be likes | 華爾街量化交易員面試 (中英文字幕)
+       </h2>
+       <div class="flex items-center text-xs text-gray-500 mt-1">
+        <img alt="channel" class="w-4 h-4 rounded-full mr-1" src="placeholder.png"/>
+        <span>
+         Hsi-Wei
+        </span>
+       </div>
+       <p class="text-xs text-gray-500 mt-1">
+        9.3万次观看 · 1个月前
+       </p>
+      </div>
+     </div>
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <div class="absolute bottom-2 right-2 bg-gray-800 text-white text-xs px-1 py-0.5 rounded">
+       →
+      </div>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        EVE Online: 加入我们，开启宇宙之旅
+       </h2>
+       <p class="text-xs text-gray-500 mt-1">
+        赞助广告 · EVE Online
+       </p>
+      </div>
+     </div>
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       12:44
+      </span>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
+       </h2>
+       <div class="flex items-center text-xs text-gray-500 mt-1">
+        <img alt="channel" class="w-4 h-4 rounded-full mr-1" src="placeholder.png"/>
+        <span>
+         Matthew Smith
+        </span>
+       </div>
+      </div>
+     </div>
+     <div class="bg-white rounded-lg shadow relative">
+      <img alt="" class="w-full rounded-t-lg" src="placeholder.png"/>
+      <span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       36:54
+      </span>
+      <div class="p-2">
+       <h2 class="text-sm font-medium">
+        But what is quantum computing? (Grover's Algorithm)
+       </h2>
+       <div class="flex items-center text-xs text-gray-500 mt-1">
+        <img alt="channel" class="w-4 h-4 rounded-full mr-1" src="placeholder.png"/>
+        <span>
+         3Blue1Brown
+         <span class="text-blue-600">
+          ✔
+         </span>
+        </span>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </body>
+</html>
diff --git a/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout_final.html b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout_final.html
new file mode 100644
index 0000000000000000000000000000000000000000..831b1910a43eef93b194e8a9cca61e93d291457b
--- /dev/null
+++ b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_layout_final.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>
+   Bounding Boxes Layout
+  </title>
+<style>
+   body, html {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+            .container { 
+                position: relative;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+            }
+            .box {
+                position: absolute;
+                box-sizing: border-box;
+                overflow: hidden;
+            }
+            .box > .container {
+                display: grid;
+                width: 100%;
+                height: 100%;
+            }
+  </style>
+<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
+</head>
+<body>
+<div class="container">
+<div class="box" id="1" style="left: 0.0%; top: 0.0%; width: 2.998812351543943%; height: 99.76608187134502%;">
+<div class="flex flex-col items-center space-y-6 p-4">
+<div class="flex items-center">
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+</svg>
+</div>
+<div class="flex items-center space-x-2">
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a2 2 0 002 2H5a2 2 0 00-2-2V10a2 2 0 012-2h1a1 1 0 011 1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+</svg>
+<span>
+       首页
+      </span>
+</div>
+<div class="flex items-center space-x-2">
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.536 8.464a5 5 0 017.072 7.072l-1.414 1.414a1 1 0 01-1.414-1.414l1.414-1.414a3 3 0 00-4.242-4.242l-1.414 1.414a1 1 0 01-1.414-1.414l1.414-1.414a5 5 0 010-7.072z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+<path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+</svg>
+<span>
+       Shorts
+      </span>
+</div>
+<div class="flex items-center space-x-2">
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<rect height="14" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="5">
+</rect>
+<path d="M8 10l4 2 4-2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+</svg>
+<span>
+       订阅
+      </span>
+</div>
+<div class="flex items-center space-x-2">
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+</path>
+</svg>
+<span>
+       我
+      </span>
+</div>
+</div>
+</div>
+<div class="box" id="2" style="left: 3.1769596199524943%; top: 0.0%; width: 96.7042755344418%; height: 8.362573099415204%;">
+<div class="flex flex-col">
+<div class="flex items-center justify-between bg-white p-2">
+<div class="flex items-center">
+<div class="bg-red-600 text-white rounded-l-md p-1">
+        ▶
+       </div>
+<span class="text-xl font-bold ml-1">
+        YouTube
+       </span>
+<span class="text-sm text-gray-600 ml-1">
+        HK
+       </span>
+</div>
+<div class="flex-1 mx-4">
+<div class="flex">
+<input class="w-full border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none" placeholder="搜索" type="text"/>
+<button class="border border-gray-300 rounded-r-md bg-gray-100 px-3 py-1">
+         🔍
+        </button>
+<button class="ml-2 bg-gray-100 rounded-md px-2 py-1">
+         🎤
+        </button>
+</div>
+</div>
+<div class="flex items-center">
+<button class="flex items-center bg-gray-100 rounded-md px-3 py-1 mr-4">
+        +
+        <span class="ml-1">
+         创建
+        </span>
+</button>
+<div class="mr-4">
+        🔔
+       </div>
+<div class="bg-green-700 text-white rounded-full p-2 text-xl">
+        Y
+       </div>
+</div>
+</div>
+<div class="flex overflow-x-auto whitespace-nowrap bg-white p-2">
+<button class="bg-black text-white rounded-md px-3 py-2 mr-2">
+       全部
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       播客
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       游戏
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       直播
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       数学
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       篮球
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       足球
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       动画
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       最近上传
+      </button>
+<button class="bg-gray-100 text-black rounded-md px-3 py-2 mr-2">
+       发现新视频
+      </button>
+</div>
+</div>
+</div>
+<div class="box" id="3" style="left: 3.1769596199524943%; top: 6.666666666666667%; width: 63.59857482185273%; height: 3.625730994152047%;">
+<div class="flex items-center space-x-2">
+<div class="bg-black text-white px-4 py-2 rounded-md">
+      全部
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      播客
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      游戏
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      直播
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      数学
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      篮球
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      足球
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      动画
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      最近上传
+     </div>
+<div class="bg-gray-100 text-black px-4 py-2 rounded-md">
+      发现新视频
+     </div>
+</div>
+</div>
+<div class="box" id="4" style="left: 3.1769596199524943%; top: 10.584795321637428%; width: 96.49643705463184%; height: 89.18128654970761%;">
+<div class="grid grid-cols-3 gap-4">
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph0.png"/>
+<span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       26:24
+      </span>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        The Key Equation Behind Probability
+       </h2>
+<div class="flex items-center text-xs text-gray-500 mt-1">
+<img alt="channel" class="w-4 h-4 rounded-full mr-1" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph1.png"/>
+<span>
+         Artem Kirsanov
+         <span class="text-blue-600">
+          ✔
+         </span>
+</span>
+</div>
+<p class="text-xs text-gray-500 mt-1">
+        27万次观看 · 10个月前
+       </p>
+</div>
+</div>
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph2.png"/>
+<span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       49:40
+      </span>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        Statistical mechanics of extensive-width shallow neural networks near interpolation
+       </h2>
+<div class="flex items-center text-xs text-gray-500 mt-1">
+<div class="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center text-white text-xs mr-1">
+         QLS
+        </div>
+<span>
+         ICTP Quantitative Life Sciences
+        </span>
+</div>
+<p class="text-xs text-gray-500 mt-1">
+        48次观看 · 22小时前
+       </p>
+</div>
+</div>
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph3.png"/>
+<span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       11:51
+      </span>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        Wall Street Quant interview be likes | 華爾街量化交易員面試 (中英文字幕)
+       </h2>
+<div class="flex items-center text-xs text-gray-500 mt-1">
+<img alt="channel" class="w-4 h-4 rounded-full mr-1" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph4.png"/>
+<span>
+         Hsi-Wei
+        </span>
+</div>
+<p class="text-xs text-gray-500 mt-1">
+        9.3万次观看 · 1个月前
+       </p>
+</div>
+</div>
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph5.png"/>
+<div class="absolute bottom-2 right-2 bg-gray-800 text-white text-xs px-1 py-0.5 rounded">
+       →
+      </div>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        EVE Online: 加入我们，开启宇宙之旅
+       </h2>
+<p class="text-xs text-gray-500 mt-1">
+        赞助广告 · EVE Online
+       </p>
+</div>
+</div>
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph6.png"/>
+<span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       12:44
+      </span>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
+       </h2>
+<div class="flex items-center text-xs text-gray-500 mt-1">
+<img alt="channel" class="w-4 h-4 rounded-full mr-1" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph7.png"/>
+<span>
+         Matthew Smith
+        </span>
+</div>
+</div>
+</div>
+<div class="bg-white rounded-lg shadow relative">
+<img alt="" class="w-full rounded-t-lg" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph8.png"/>
+<span class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
+       36:54
+      </span>
+<div class="p-2">
+<h2 class="text-sm font-medium">
+        But what is quantum computing? (Grover's Algorithm)
+       </h2>
+<div class="flex items-center text-xs text-gray-500 mt-1">
+<img alt="channel" class="w-4 h-4 rounded-full mr-1" src="cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph9.png"/>
+<span>
+         3Blue1Brown
+         <span class="text-blue-600">
+          ✔
+         </span>
+</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph0.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph0.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph0.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph0.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph6.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph1.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph6.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph1.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph2.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph2.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph2.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph2.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph4.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph3.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph4.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph3.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph10.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph4.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph10.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph4.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph1.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph5.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph1.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph5.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph8.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph6.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph8.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph6.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph3.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph7.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph3.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph7.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph11.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph8.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph11.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph8.png
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph5.png b/screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph9.png
similarity index 100%
rename from screencoder/demo/public/assets/debug/cropped_images_demo1/ph5.png
rename to screencoder/data/output/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/cropped_images_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ph9.png
diff --git a/screencoder/data/packages/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.zip b/screencoder/data/packages/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.zip
new file mode 100644
index 0000000000000000000000000000000000000000..d980f14638738b7c10922c33f460d7dc9645a656
--- /dev/null
+++ b/screencoder/data/packages/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.zip
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ab3d37ce2e0b38f7494b16bf9ef63d01ad7cee0ca34c80d3e7c5e6ad349fedf3
+size 2548358
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
new file mode 100644
index 0000000000000000000000000000000000000000..48114abfac19e58856f5919fd72f59baba9eee9c
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:67a386d2e880e340cc61d467e9eb332f94c6ba01001cd5e8503fd3147225a72c
+size 2250676
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_bboxes.json b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_bboxes.json
new file mode 100644
index 0000000000000000000000000000000000000000..59875f8dc6aca4f3bb90f59010ad718ea5d3c245
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_bboxes.json
@@ -0,0 +1,114 @@
+{
+  "regions": [
+    {
+      "id": "1",
+      "x": 0.0,
+      "y": 0.0,
+      "w": 0.029691211401425176,
+      "h": 0.9970760233918129
+    },
+    {
+      "id": "2",
+      "x": 0.03147268408551069,
+      "y": 0.0,
+      "w": 0.9667458432304038,
+      "h": 0.08304093567251462
+    },
+    {
+      "id": "3",
+      "x": 0.03147268408551069,
+      "y": 0.06666666666666667,
+      "w": 0.6356888361045131,
+      "h": 0.03567251461988304
+    },
+    {
+      "id": "4",
+      "x": 0.03147268408551069,
+      "y": 0.10526315789473684,
+      "w": 0.9646674584323041,
+      "h": 0.8912280701754386
+    }
+  ],
+  "placeholders": [
+    {
+      "id": "ph0",
+      "x": 0.03147268408551069,
+      "y": 0.10526315789473684,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph1",
+      "x": 0.03800475059382423,
+      "y": 0.1497076023391813,
+      "w": 0.012470308788598575,
+      "h": 0.022222222222222223,
+      "region_id": "4"
+    },
+    {
+      "id": "ph2",
+      "x": 0.35748218527315917,
+      "y": 0.10526315789473684,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph3",
+      "x": 0.6831947743467933,
+      "y": 0.10526315789473684,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph4",
+      "x": 0.6894299287410927,
+      "y": 0.17777777777777778,
+      "w": 0.012470308788598575,
+      "h": 0.022222222222222223,
+      "region_id": "4"
+    },
+    {
+      "id": "ph5",
+      "x": 0.03147268408551069,
+      "y": 0.2608187134502924,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph6",
+      "x": 0.35748218527315917,
+      "y": 0.2608187134502924,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph7",
+      "x": 0.36371733966745845,
+      "y": 0.3333333333333333,
+      "w": 0.012470308788598575,
+      "h": 0.022222222222222223,
+      "region_id": "4"
+    },
+    {
+      "id": "ph8",
+      "x": 0.6831947743467933,
+      "y": 0.2608187134502924,
+      "w": 0.31324228028503565,
+      "h": 0.0,
+      "region_id": "4"
+    },
+    {
+      "id": "ph9",
+      "x": 0.6894299287410927,
+      "y": 0.30526315789473685,
+      "w": 0.012470308788598575,
+      "h": 0.022222222222222223,
+      "region_id": "4"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_with_bboxes.png b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_with_bboxes.png
new file mode 100644
index 0000000000000000000000000000000000000000..51531569c29fa2f42a0014c0365c7387cd67fab9
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56_with_bboxes.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a8b71119a8d5504a1cccf849a8a1949b3f03a6f6838bd1e187596cc2bec62ba
+size 3249978
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/debug_gray_bboxes_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/debug_gray_bboxes_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
new file mode 100644
index 0000000000000000000000000000000000000000..708a16d422d93e23aea69d8f13bfefcc5207c1e2
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/debug_gray_bboxes_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:51772de4b599f52fed1652ade0ae8c4dd93af4ae5b9bc2185a14551922ec370a
+size 3239426
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.jpg b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0d7c25ec1b3f2fd740127473dd0302a8f4c178a7
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:61544ef7ad15e669c50446e16c45f4325239d07cc25e192ce7543a9fbc5a8c8f
+size 151425
diff --git a/screencoder/demo/public/assets/demo1_output/ip/demo1_filtered.json b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json
similarity index 80%
rename from screencoder/demo/public/assets/demo1_output/ip/demo1_filtered.json
rename to screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json
index 2fa99373ddc4eebbf3f57a57edf4b1ec143e9fe4..7cad9b6cb2fe4c429e1baddcc13515cd1451b36c 100644
--- a/screencoder/demo/public/assets/demo1_output/ip/demo1_filtered.json
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/ip/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json
@@ -28,197 +28,147 @@
         {
             "id": 3,
             "class": "Compo",
-            "column_min": 64,
-            "row_min": 3,
-            "column_max": 70,
-            "row_max": 7,
-            "width": 6,
-            "height": 4
+            "column_min": 777,
+            "row_min": 2,
+            "column_max": 791,
+            "row_max": 16,
+            "width": 14,
+            "height": 14
         },
         {
             "id": 4,
             "class": "Compo",
-            "column_min": 513,
-            "row_min": 0,
-            "column_max": 518,
-            "row_max": 17,
-            "width": 5,
-            "height": 17
+            "column_min": 3,
+            "row_min": 6,
+            "column_max": 11,
+            "row_max": 12,
+            "width": 8,
+            "height": 6
         },
         {
             "id": 5,
             "class": "Compo",
-            "column_min": 525,
-            "row_min": 0,
-            "column_max": 542,
-            "row_max": 18,
-            "width": 17,
-            "height": 18
+            "column_min": 728,
+            "row_min": 6,
+            "column_max": 740,
+            "row_max": 12,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 6,
             "class": "Compo",
-            "column_min": 711,
-            "row_min": 0,
-            "column_max": 747,
-            "row_max": 17,
-            "width": 36,
-            "height": 17
+            "column_min": 38,
+            "row_min": 30,
+            "column_max": 50,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 7,
             "class": "Compo",
-            "column_min": 755,
-            "row_min": 5,
-            "column_max": 763,
-            "row_max": 14,
-            "width": 8,
-            "height": 9
+            "column_min": 65,
+            "row_min": 30,
+            "column_max": 77,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 8,
             "class": "Compo",
-            "column_min": 777,
-            "row_min": 2,
-            "column_max": 791,
-            "row_max": 16,
-            "width": 14,
-            "height": 14
+            "column_min": 93,
+            "row_min": 30,
+            "column_max": 105,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 9,
             "class": "Compo",
-            "column_min": 3,
-            "row_min": 6,
-            "column_max": 11,
-            "row_max": 12,
-            "width": 8,
+            "column_min": 120,
+            "row_min": 30,
+            "column_max": 132,
+            "row_max": 36,
+            "width": 12,
             "height": 6
         },
         {
             "id": 10,
             "class": "Compo",
-            "column_min": 3,
+            "column_min": 147,
             "row_min": 30,
-            "column_max": 12,
-            "row_max": 39,
-            "width": 9,
-            "height": 9
+            "column_max": 159,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 11,
             "class": "Compo",
-            "column_min": 60,
-            "row_min": 26,
-            "column_max": 83,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
+            "column_min": 175,
+            "row_min": 30,
+            "column_max": 187,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 12,
             "class": "Compo",
-            "column_min": 87,
-            "row_min": 26,
-            "column_max": 110,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
+            "column_min": 202,
+            "row_min": 30,
+            "column_max": 214,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 13,
             "class": "Compo",
-            "column_min": 142,
-            "row_min": 26,
-            "column_max": 164,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
+            "column_min": 229,
+            "row_min": 30,
+            "column_max": 241,
+            "row_max": 36,
+            "width": 12,
+            "height": 6
         },
         {
             "id": 14,
             "class": "Compo",
-            "column_min": 170,
-            "row_min": 26,
-            "column_max": 192,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
+            "column_min": 257,
+            "row_min": 30,
+            "column_max": 268,
+            "row_max": 36,
+            "width": 11,
+            "height": 6
         },
         {
             "id": 15,
             "class": "Compo",
-            "column_min": 224,
-            "row_min": 26,
-            "column_max": 247,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
+            "column_min": 271,
+            "row_min": 30,
+            "column_max": 281,
+            "row_max": 36,
+            "width": 10,
+            "height": 6
         },
         {
             "id": 16,
             "class": "Compo",
-            "column_min": 252,
-            "row_min": 26,
-            "column_max": 286,
-            "row_max": 40,
-            "width": 34,
-            "height": 14
+            "column_min": 296,
+            "row_min": 30,
+            "column_max": 326,
+            "row_max": 36,
+            "width": 30,
+            "height": 6
         },
         {
             "id": 17,
             "class": "Compo",
             "column_min": 33,
-            "row_min": 26,
-            "column_max": 55,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 18,
-            "class": "Compo",
-            "column_min": 115,
-            "row_min": 26,
-            "column_max": 137,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 19,
-            "class": "Compo",
-            "column_min": 197,
-            "row_min": 26,
-            "column_max": 219,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 20,
-            "class": "Compo",
-            "column_min": 291,
-            "row_min": 26,
-            "column_max": 331,
-            "row_max": 40,
-            "width": 40,
-            "height": 14
-        },
-        {
-            "id": 21,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 43,
-            "column_max": 11,
-            "row_max": 48,
-            "width": 8,
-            "height": 5
-        },
-        {
-            "id": 22,
-            "class": "Compo",
-            "column_min": 33,
             "row_min": 46,
             "column_max": 282,
             "row_max": 186,
@@ -226,7 +176,7 @@
             "height": 140
         },
         {
-            "id": 23,
+            "id": 18,
             "class": "Compo",
             "column_min": 288,
             "row_min": 46,
@@ -236,7 +186,7 @@
             "height": 140
         },
         {
-            "id": 24,
+            "id": 19,
             "class": "Compo",
             "column_min": 544,
             "row_min": 46,
@@ -246,7 +196,7 @@
             "height": 140
         },
         {
-            "id": 25,
+            "id": 20,
             "class": "Compo",
             "column_min": 3,
             "row_min": 62,
@@ -256,7 +206,7 @@
             "height": 9
         },
         {
-            "id": 26,
+            "id": 21,
             "class": "Compo",
             "column_min": 1,
             "row_min": 75,
@@ -266,7 +216,7 @@
             "height": 4
         },
         {
-            "id": 27,
+            "id": 22,
             "class": "Compo",
             "column_min": 3,
             "row_min": 94,
@@ -276,17 +226,7 @@
             "height": 7
         },
         {
-            "id": 28,
-            "class": "Compo",
-            "column_min": 4,
-            "row_min": 107,
-            "column_max": 11,
-            "row_max": 111,
-            "width": 7,
-            "height": 4
-        },
-        {
-            "id": 29,
+            "id": 23,
             "class": "Compo",
             "column_min": 3,
             "row_min": 125,
@@ -296,7 +236,7 @@
             "height": 9
         },
         {
-            "id": 30,
+            "id": 24,
             "class": "Compo",
             "column_min": 33,
             "row_min": 191,
@@ -306,7 +246,7 @@
             "height": 16
         },
         {
-            "id": 31,
+            "id": 25,
             "class": "Compo",
             "column_min": 53,
             "row_min": 193,
@@ -316,7 +256,7 @@
             "height": 6
         },
         {
-            "id": 32,
+            "id": 26,
             "class": "Compo",
             "column_min": 67,
             "row_min": 193,
@@ -326,7 +266,7 @@
             "height": 7
         },
         {
-            "id": 33,
+            "id": 27,
             "class": "Compo",
             "column_min": 80,
             "row_min": 193,
@@ -336,7 +276,7 @@
             "height": 7
         },
         {
-            "id": 34,
+            "id": 28,
             "class": "Compo",
             "column_min": 108,
             "row_min": 193,
@@ -346,7 +286,7 @@
             "height": 6
         },
         {
-            "id": 35,
+            "id": 29,
             "class": "Compo",
             "column_min": 131,
             "row_min": 193,
@@ -356,7 +296,7 @@
             "height": 7
         },
         {
-            "id": 36,
+            "id": 30,
             "class": "Compo",
             "column_min": 288,
             "row_min": 191,
@@ -366,7 +306,7 @@
             "height": 16
         },
         {
-            "id": 37,
+            "id": 31,
             "class": "Compo",
             "column_min": 309,
             "row_min": 193,
@@ -376,7 +316,27 @@
             "height": 6
         },
         {
-            "id": 38,
+            "id": 32,
+            "class": "Compo",
+            "column_min": 341,
+            "row_min": 193,
+            "column_max": 383,
+            "row_max": 199,
+            "width": 42,
+            "height": 6
+        },
+        {
+            "id": 33,
+            "class": "Compo",
+            "column_min": 384,
+            "row_min": 193,
+            "column_max": 432,
+            "row_max": 199,
+            "width": 48,
+            "height": 6
+        },
+        {
+            "id": 34,
             "class": "Compo",
             "column_min": 434,
             "row_min": 193,
@@ -386,7 +346,7 @@
             "height": 6
         },
         {
-            "id": 39,
+            "id": 35,
             "class": "Compo",
             "column_min": 480,
             "row_min": 193,
@@ -396,7 +356,7 @@
             "height": 6
         },
         {
-            "id": 40,
+            "id": 36,
             "class": "Compo",
             "column_min": 510,
             "row_min": 194,
@@ -406,7 +366,7 @@
             "height": 5
         },
         {
-            "id": 41,
+            "id": 37,
             "class": "Compo",
             "column_min": 544,
             "row_min": 191,
@@ -416,17 +376,17 @@
             "height": 16
         },
         {
-            "id": 42,
+            "id": 38,
             "class": "Compo",
-            "column_min": 564,
+            "column_min": 565,
             "row_min": 193,
             "column_max": 577,
             "row_max": 198,
-            "width": 13,
+            "width": 12,
             "height": 5
         },
         {
-            "id": 43,
+            "id": 39,
             "class": "Compo",
             "column_min": 580,
             "row_min": 193,
@@ -436,7 +396,7 @@
             "height": 6
         },
         {
-            "id": 44,
+            "id": 40,
             "class": "Compo",
             "column_min": 600,
             "row_min": 193,
@@ -446,7 +406,7 @@
             "height": 6
         },
         {
-            "id": 45,
+            "id": 41,
             "class": "Compo",
             "column_min": 620,
             "row_min": 193,
@@ -456,17 +416,7 @@
             "height": 6
         },
         {
-            "id": 46,
-            "class": "Compo",
-            "column_min": 649,
-            "row_min": 193,
-            "column_max": 656,
-            "row_max": 199,
-            "width": 7,
-            "height": 6
-        },
-        {
-            "id": 47,
+            "id": 42,
             "class": "Compo",
             "column_min": 658,
             "row_min": 193,
@@ -476,7 +426,7 @@
             "height": 6
         },
         {
-            "id": 48,
+            "id": 43,
             "class": "Compo",
             "column_min": 678,
             "row_min": 192,
@@ -486,7 +436,7 @@
             "height": 7
         },
         {
-            "id": 49,
+            "id": 44,
             "class": "Compo",
             "column_min": 741,
             "row_min": 192,
@@ -496,27 +446,27 @@
             "height": 8
         },
         {
-            "id": 50,
+            "id": 45,
             "class": "Compo",
             "column_min": 53,
             "row_min": 204,
-            "column_max": 94,
+            "column_max": 70,
             "row_max": 209,
-            "width": 41,
+            "width": 17,
             "height": 5
         },
         {
-            "id": 51,
+            "id": 46,
             "class": "Compo",
-            "column_min": 96,
+            "column_min": 72,
             "row_min": 204,
-            "column_max": 102,
+            "column_max": 94,
             "row_max": 209,
-            "width": 6,
+            "width": 22,
             "height": 5
         },
         {
-            "id": 52,
+            "id": 47,
             "class": "Compo",
             "column_min": 309,
             "row_min": 202,
@@ -526,7 +476,7 @@
             "height": 7
         },
         {
-            "id": 53,
+            "id": 48,
             "class": "Compo",
             "column_min": 565,
             "row_min": 204,
@@ -536,7 +486,7 @@
             "height": 5
         },
         {
-            "id": 54,
+            "id": 49,
             "class": "Compo",
             "column_min": 54,
             "row_min": 212,
@@ -546,7 +496,7 @@
             "height": 6
         },
         {
-            "id": 55,
+            "id": 50,
             "class": "Compo",
             "column_min": 90,
             "row_min": 212,
@@ -556,7 +506,7 @@
             "height": 6
         },
         {
-            "id": 56,
+            "id": 51,
             "class": "Compo",
             "column_min": 309,
             "row_min": 214,
@@ -566,7 +516,7 @@
             "height": 5
         },
         {
-            "id": 57,
+            "id": 52,
             "class": "Compo",
             "column_min": 357,
             "row_min": 213,
@@ -576,7 +526,7 @@
             "height": 6
         },
         {
-            "id": 58,
+            "id": 53,
             "class": "Compo",
             "column_min": 565,
             "row_min": 212,
@@ -586,17 +536,17 @@
             "height": 6
         },
         {
-            "id": 59,
+            "id": 54,
             "class": "Compo",
             "column_min": 603,
             "row_min": 212,
-            "column_max": 624,
+            "column_max": 623,
             "row_max": 218,
-            "width": 21,
+            "width": 20,
             "height": 6
         },
         {
-            "id": 60,
+            "id": 55,
             "class": "Compo",
             "column_min": 309,
             "row_min": 222,
@@ -606,7 +556,7 @@
             "height": 6
         },
         {
-            "id": 61,
+            "id": 56,
             "class": "Compo",
             "column_min": 339,
             "row_min": 222,
@@ -616,7 +566,7 @@
             "height": 6
         },
         {
-            "id": 62,
+            "id": 57,
             "class": "Compo",
             "column_min": 350,
             "row_min": 222,
@@ -626,7 +576,7 @@
             "height": 6
         },
         {
-            "id": 63,
+            "id": 58,
             "class": "Compo",
             "column_min": 33,
             "row_min": 243,
@@ -636,7 +586,7 @@
             "height": 140
         },
         {
-            "id": 64,
+            "id": 59,
             "class": "Compo",
             "column_min": 288,
             "row_min": 243,
@@ -646,7 +596,7 @@
             "height": 140
         },
         {
-            "id": 65,
+            "id": 60,
             "class": "Block",
             "column_min": 544,
             "row_min": 243,
@@ -656,17 +606,17 @@
             "height": 140
         },
         {
-            "id": 68,
+            "id": 63,
             "class": "Compo",
-            "column_min": 33,
+            "column_min": 35,
             "row_min": 388,
             "column_max": 48,
-            "row_max": 403,
-            "width": 15,
-            "height": 15
+            "row_max": 400,
+            "width": 13,
+            "height": 12
         },
         {
-            "id": 69,
+            "id": 64,
             "class": "Compo",
             "column_min": 54,
             "row_min": 390,
@@ -676,7 +626,7 @@
             "height": 5
         },
         {
-            "id": 70,
+            "id": 65,
             "class": "Compo",
             "column_min": 90,
             "row_min": 389,
@@ -686,7 +636,7 @@
             "height": 7
         },
         {
-            "id": 71,
+            "id": 66,
             "class": "Compo",
             "column_min": 124,
             "row_min": 389,
@@ -696,7 +646,7 @@
             "height": 7
         },
         {
-            "id": 72,
+            "id": 67,
             "class": "Compo",
             "column_min": 288,
             "row_min": 388,
@@ -706,7 +656,7 @@
             "height": 15
         },
         {
-            "id": 73,
+            "id": 68,
             "class": "Compo",
             "column_min": 309,
             "row_min": 390,
@@ -716,7 +666,7 @@
             "height": 6
         },
         {
-            "id": 74,
+            "id": 69,
             "class": "Compo",
             "column_min": 344,
             "row_min": 390,
@@ -726,17 +676,7 @@
             "height": 6
         },
         {
-            "id": 75,
-            "class": "Compo",
-            "column_min": 373,
-            "row_min": 390,
-            "column_max": 377,
-            "row_max": 395,
-            "width": 4,
-            "height": 5
-        },
-        {
-            "id": 76,
+            "id": 70,
             "class": "Compo",
             "column_min": 391,
             "row_min": 390,
@@ -746,17 +686,17 @@
             "height": 5
         },
         {
-            "id": 77,
+            "id": 71,
             "class": "Compo",
             "column_min": 419,
             "row_min": 390,
             "column_max": 450,
-            "row_max": 397,
+            "row_max": 396,
             "width": 31,
-            "height": 7
+            "height": 6
         },
         {
-            "id": 78,
+            "id": 72,
             "class": "Compo",
             "column_min": 452,
             "row_min": 390,
@@ -766,27 +706,17 @@
             "height": 5
         },
         {
-            "id": 79,
-            "class": "Compo",
-            "column_min": 486,
-            "row_min": 390,
-            "column_max": 492,
-            "row_max": 395,
-            "width": 6,
-            "height": 5
-        },
-        {
-            "id": 80,
+            "id": 73,
             "class": "Compo",
             "column_min": 494,
             "row_min": 390,
             "column_max": 520,
-            "row_max": 397,
+            "row_max": 396,
             "width": 26,
-            "height": 7
+            "height": 6
         },
         {
-            "id": 81,
+            "id": 74,
             "class": "Compo",
             "column_min": 544,
             "row_min": 388,
@@ -796,7 +726,7 @@
             "height": 15
         },
         {
-            "id": 82,
+            "id": 75,
             "class": "Compo",
             "column_min": 565,
             "row_min": 390,
@@ -806,7 +736,7 @@
             "height": 5
         },
         {
-            "id": 83,
+            "id": 76,
             "class": "Compo",
             "column_min": 577,
             "row_min": 390,
@@ -816,7 +746,7 @@
             "height": 5
         },
         {
-            "id": 84,
+            "id": 77,
             "class": "Compo",
             "column_min": 629,
             "row_min": 390,
@@ -826,17 +756,27 @@
             "height": 6
         },
         {
-            "id": 85,
+            "id": 78,
             "class": "Compo",
             "column_min": 667,
             "row_min": 389,
+            "column_max": 694,
+            "row_max": 396,
+            "width": 27,
+            "height": 7
+        },
+        {
+            "id": 79,
+            "class": "Compo",
+            "column_min": 695,
+            "row_min": 389,
             "column_max": 728,
             "row_max": 396,
-            "width": 61,
+            "width": 33,
             "height": 7
         },
         {
-            "id": 86,
+            "id": 80,
             "class": "Compo",
             "column_min": 379,
             "row_min": 390,
@@ -846,7 +786,7 @@
             "height": 5
         },
         {
-            "id": 87,
+            "id": 81,
             "class": "Compo",
             "column_min": 600,
             "row_min": 390,
@@ -856,7 +796,7 @@
             "height": 6
         },
         {
-            "id": 88,
+            "id": 82,
             "class": "Compo",
             "column_min": 85,
             "row_min": 400,
@@ -866,7 +806,7 @@
             "height": 5
         },
         {
-            "id": 89,
+            "id": 83,
             "class": "Compo",
             "column_min": 97,
             "row_min": 400,
@@ -876,43 +816,43 @@
             "height": 5
         },
         {
-            "id": 90,
+            "id": 84,
             "class": "Compo",
             "column_min": 309,
             "row_min": 400,
-            "column_max": 349,
+            "column_max": 332,
             "row_max": 405,
-            "width": 40,
+            "width": 23,
             "height": 5
         },
         {
-            "id": 91,
+            "id": 85,
             "class": "Compo",
-            "column_min": 565,
+            "column_min": 334,
             "row_min": 400,
-            "column_max": 600,
+            "column_max": 349,
             "row_max": 405,
-            "width": 35,
+            "width": 15,
             "height": 5
         },
         {
-            "id": 92,
+            "id": 86,
             "class": "Compo",
-            "column_min": 53,
+            "column_min": 565,
             "row_min": 400,
-            "column_max": 80,
+            "column_max": 600,
             "row_max": 405,
-            "width": 27,
+            "width": 35,
             "height": 5
         },
         {
-            "id": 93,
+            "id": 87,
             "class": "Compo",
-            "column_min": 602,
+            "column_min": 54,
             "row_min": 400,
-            "column_max": 607,
+            "column_max": 79,
             "row_max": 405,
-            "width": 5,
+            "width": 25,
             "height": 5
         }
     ]
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/mapping_full_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/mapping_full_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json
new file mode 100644
index 0000000000000000000000000000000000000000..dcd8130ab1343920457d0ee360943f489749f235
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/mapping_full_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.json
@@ -0,0 +1,22 @@
+{
+  "4": {
+    "transform": {
+      "scale_x": 4.215269086357948,
+      "scale_y": 4.211822660098522,
+      "dx": -7.298498122653427,
+      "dy": -231.3620689655172
+    },
+    "mapping": {
+      "ph0": 17,
+      "ph1": 58,
+      "ph2": 18,
+      "ph3": 19,
+      "ph4": 60,
+      "ph5": 24,
+      "ph6": 59,
+      "ph7": 30,
+      "ph8": 74,
+      "ph9": 37
+    }
+  }
+}
\ No newline at end of file
diff --git a/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/overlay_test_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/overlay_test_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
new file mode 100644
index 0000000000000000000000000000000000000000..988f9b0e68704aa33e99692f55a98818687bb57f
--- /dev/null
+++ b/screencoder/data/tmp/55bcc68d-573e-4015-b2f1-7c1b1d6ebe56/overlay_test_55bcc68d-573e-4015-b2f1-7c1b1d6ebe56.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6d1697641705e5743e2f32b2083af95cdc784a54427f944d69e39c1b71444c40
+size 3266909
diff --git a/screencoder/demo/README.md b/screencoder/demo/README.md
deleted file mode 100644
index db743265eb272540c7855eed1a781cc58bc4c910..0000000000000000000000000000000000000000
--- a/screencoder/demo/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# UI2Code Demo
-
-UI2Code Demo is an interactive web application that demonstrates how to reconstruct high-fidelity frontend code from UI screenshots or design mockups, step by step. It is designed for research, education, and showcasing code generation techniques for modern web interfaces.
-
-## Features
-- **Multiple Real-World Demos:** Includes step-by-step reconstructions of YouTube, Instagram, and Google Search interfaces.
-- **Progressive Code Generation:** Visualizes the incremental build-up of complex UIs, showing each step in the process.
-- **Live Preview:** Responsive, high-fidelity preview of the generated code at every step.
-- **Custom Screenshot Upload:** (Optional) Upload your own screenshot to experience AI-driven code generation (if integrated).
-- **Final HTML Output:** Each demo provides a complete, production-quality HTML/CSS result for reference.
-- **Modern UI/UX:** Built with React, Tailwind CSS, and Monaco Editor for a smooth developer and user experience.
-
-## Getting Started
-### Prerequisites
-- Node.js (v16+ recommended)
-- pnpm (recommended) or npm
-
-### Installation
-```bash
-pnpm install
-# or
-npm install
-```
-
-### Running the Development Server
-```bash
-pnpm run dev
-# or
-npm run dev
-```
-Visit [http://localhost:5173](http://localhost:5173) in your browser to use the demo.
-
-## Usage
-1. **Select a Demo:** Choose from YouTube, Instagram, or Google Search Design in the left sidebar.
-2. **Play the Generation:** Click the "▶️ Play" button to watch the UI being reconstructed step by step, or use the slider to scrub through steps manually.
-3. **View Final Result:** At the end, see the complete HTML/CSS for the chosen interface.
-4. **(Optional) Upload Screenshot:** If enabled, upload your own screenshot to try AI-powered code generation.
-
-## Demo Data & Extensibility
-- **Step Files:** Each demo consists of a manifest and a sequence of HTML files (`0001.html`, `0002.html`, ...), plus a `final_*.html` for the complete result.
-- **Adding New Demos:**
-  1. Prepare your stepwise HTML files and a manifest in a new folder under `public/demos/`.
-  2. Add a thumbnail image to `public/assets/`.
-  3. Update `public/demos.json` with the new demo's metadata.
-- **Assets:** All images used in demos are stored in `public/assets/` and referenced relatively in HTML.
-
-## Dependencies
-- [React](https://react.dev/) 18+
-- [Vite](https://vitejs.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react)
-
-## Scripts
-- `script/prepare_steps.py`: Python script to generate stepwise HTML files from a design.
-
-## Tools
-- `UIED`: Tradition UI element detection used to detect elements in the screenshot and obtain corresponding bboxes.
\ No newline at end of file
diff --git a/screencoder/demo/index.html b/screencoder/demo/index.html
deleted file mode 100644
index c9092087befd256dfba6c746ba747a61ced43c59..0000000000000000000000000000000000000000
--- a/screencoder/demo/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>UI Code Demo</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="m-0">
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/screencoder/demo/package.json b/screencoder/demo/package.json
deleted file mode 100644
index a2a151e512816754a9497a686b2a32325217476c..0000000000000000000000000000000000000000
--- a/screencoder/demo/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "screencoder-demo",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "@monaco-editor/react": "^4.7.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^5.0.0"
-  }
-}
\ No newline at end of file
diff --git a/screencoder/demo/pnpm-lock.yaml b/screencoder/demo/pnpm-lock.yaml
deleted file mode 100644
index ac24c0973670d9d6681a57fa270e1bd9f3972389..0000000000000000000000000000000000000000
--- a/screencoder/demo/pnpm-lock.yaml
+++ /dev/null
@@ -1,1008 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-importers:
-
-  .:
-    dependencies:
-      '@monaco-editor/react':
-        specifier: ^4.7.0
-        version: 4.7.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react:
-        specifier: ^18.3.0
-        version: 18.3.1
-      react-dom:
-        specifier: ^18.3.0
-        version: 18.3.1(react@18.3.1)
-    devDependencies:
-      '@vitejs/plugin-react':
-        specifier: ^4.0.0
-        version: 4.6.0(vite@5.4.19)
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.19
-
-packages:
-
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
-  '@babel/code-frame@7.27.1':
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.28.0':
-    resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.28.0':
-    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.28.0':
-    resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.27.1':
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.27.3':
-    resolution: {integrity: sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.27.6':
-    resolution: {integrity: sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.28.0':
-    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.28.0':
-    resolution: {integrity: sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.28.0':
-    resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
-    engines: {node: '>=6.9.0'}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
-  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.5.4':
-    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
-
-  '@jridgewell/trace-mapping@0.3.29':
-    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
-
-  '@monaco-editor/loader@1.5.0':
-    resolution: {integrity: sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==}
-
-  '@monaco-editor/react@4.7.0':
-    resolution: {integrity: sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==}
-    peerDependencies:
-      monaco-editor: '>= 0.25.0 < 1'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@rolldown/pluginutils@1.0.0-beta.19':
-    resolution: {integrity: sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==}
-
-  '@rollup/rollup-android-arm-eabi@4.44.2':
-    resolution: {integrity: sha512-g0dF8P1e2QYPOj1gu7s/3LVP6kze9A7m6x0BZ9iTdXK8N5c2V7cpBKHV3/9A4Zd8xxavdhK0t4PnqjkqVmUc9Q==}
-    cpu: [arm]
-    os: [android]
-
-  '@rollup/rollup-android-arm64@4.44.2':
-    resolution: {integrity: sha512-Yt5MKrOosSbSaAK5Y4J+vSiID57sOvpBNBR6K7xAaQvk3MkcNVV0f9fE20T+41WYN8hDn6SGFlFrKudtx4EoxA==}
-    cpu: [arm64]
-    os: [android]
-
-  '@rollup/rollup-darwin-arm64@4.44.2':
-    resolution: {integrity: sha512-EsnFot9ZieM35YNA26nhbLTJBHD0jTwWpPwmRVDzjylQT6gkar+zenfb8mHxWpRrbn+WytRRjE0WKsfaxBkVUA==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rollup/rollup-darwin-x64@4.44.2':
-    resolution: {integrity: sha512-dv/t1t1RkCvJdWWxQ2lWOO+b7cMsVw5YFaS04oHpZRWehI1h0fV1gF4wgGCTyQHHjJDfbNpwOi6PXEafRBBezw==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rollup/rollup-freebsd-arm64@4.44.2':
-    resolution: {integrity: sha512-W4tt4BLorKND4qeHElxDoim0+BsprFTwb+vriVQnFFtT/P6v/xO5I99xvYnVzKWrK6j7Hb0yp3x7V5LUbaeOMg==}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@rollup/rollup-freebsd-x64@4.44.2':
-    resolution: {integrity: sha512-tdT1PHopokkuBVyHjvYehnIe20fxibxFCEhQP/96MDSOcyjM/shlTkZZLOufV3qO6/FQOSiJTBebhVc12JyPTA==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.44.2':
-    resolution: {integrity: sha512-+xmiDGGaSfIIOXMzkhJ++Oa0Gwvl9oXUeIiwarsdRXSe27HUIvjbSIpPxvnNsRebsNdUo7uAiQVgBD1hVriwSQ==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm-musleabihf@4.44.2':
-    resolution: {integrity: sha512-bDHvhzOfORk3wt8yxIra8N4k/N0MnKInCW5OGZaeDYa/hMrdPaJzo7CSkjKZqX4JFUWjUGm88lI6QJLCM7lDrA==}
-    cpu: [arm]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-gnu@4.44.2':
-    resolution: {integrity: sha512-NMsDEsDiYghTbeZWEGnNi4F0hSbGnsuOG+VnNvxkKg0IGDvFh7UVpM/14mnMwxRxUf9AdAVJgHPvKXf6FpMB7A==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-arm64-musl@4.44.2':
-    resolution: {integrity: sha512-lb5bxXnxXglVq+7imxykIp5xMq+idehfl+wOgiiix0191av84OqbjUED+PRC5OA8eFJYj5xAGcpAZ0pF2MnW+A==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@rollup/rollup-linux-loongarch64-gnu@4.44.2':
-    resolution: {integrity: sha512-Yl5Rdpf9pIc4GW1PmkUGHdMtbx0fBLE1//SxDmuf3X0dUC57+zMepow2LK0V21661cjXdTn8hO2tXDdAWAqE5g==}
-    cpu: [loong64]
-    os: [linux]
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.44.2':
-    resolution: {integrity: sha512-03vUDH+w55s680YYryyr78jsO1RWU9ocRMaeV2vMniJJW/6HhoTBwyyiiTPVHNWLnhsnwcQ0oH3S9JSBEKuyqw==}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-gnu@4.44.2':
-    resolution: {integrity: sha512-iYtAqBg5eEMG4dEfVlkqo05xMOk6y/JXIToRca2bAWuqjrJYJlx/I7+Z+4hSrsWU8GdJDFPL4ktV3dy4yBSrzg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-riscv64-musl@4.44.2':
-    resolution: {integrity: sha512-e6vEbgaaqz2yEHqtkPXa28fFuBGmUJ0N2dOJK8YUfijejInt9gfCSA7YDdJ4nYlv67JfP3+PSWFX4IVw/xRIPg==}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@rollup/rollup-linux-s390x-gnu@4.44.2':
-    resolution: {integrity: sha512-evFOtkmVdY3udE+0QKrV5wBx7bKI0iHz5yEVx5WqDJkxp9YQefy4Mpx3RajIVcM6o7jxTvVd/qpC1IXUhGc1Mw==}
-    cpu: [s390x]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-gnu@4.44.2':
-    resolution: {integrity: sha512-/bXb0bEsWMyEkIsUL2Yt5nFB5naLAwyOWMEviQfQY1x3l5WsLKgvZf66TM7UTfED6erckUVUJQ/jJ1FSpm3pRQ==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-linux-x64-musl@4.44.2':
-    resolution: {integrity: sha512-3D3OB1vSSBXmkGEZR27uiMRNiwN08/RVAcBKwhUYPaiZ8bcvdeEwWPvbnXvvXHY+A/7xluzcN+kaiOFNiOZwWg==}
-    cpu: [x64]
-    os: [linux]
-
-  '@rollup/rollup-win32-arm64-msvc@4.44.2':
-    resolution: {integrity: sha512-VfU0fsMK+rwdK8mwODqYeM2hDrF2WiHaSmCBrS7gColkQft95/8tphyzv2EupVxn3iE0FI78wzffoULH1G+dkw==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rollup/rollup-win32-ia32-msvc@4.44.2':
-    resolution: {integrity: sha512-+qMUrkbUurpE6DVRjiJCNGZBGo9xM4Y0FXU5cjgudWqIBWbcLkjE3XprJUsOFgC6xjBClwVa9k6O3A7K3vxb5Q==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rollup/rollup-win32-x64-msvc@4.44.2':
-    resolution: {integrity: sha512-3+QZROYfJ25PDcxFF66UEk8jGWigHJeecZILvkPkyQN7oc5BvFo4YEXFkOs154j3FTMp9mn9Ky8RCOwastduEA==}
-    cpu: [x64]
-    os: [win32]
-
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.20.7':
-    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
-
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
-  '@vitejs/plugin-react@4.6.0':
-    resolution: {integrity: sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
-
-  browserslist@4.25.1:
-    resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  caniuse-lite@1.0.30001727:
-    resolution: {integrity: sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==}
-
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  electron-to-chromium@1.5.182:
-    resolution: {integrity: sha512-Lv65Btwv9W4J9pyODI6EWpdnhfvrve/us5h1WspW8B2Fb0366REPtY3hX7ounk1CkV/TBjWCEvCBBbYbmV0qCA==}
-
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-
-  monaco-editor@0.52.2:
-    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
-
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
-
-  postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
-
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
-
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
-
-  rollup@4.44.2:
-    resolution: {integrity: sha512-PVoapzTwSEcelaWGth3uR66u7ZRo6qhPHc0f2uRO9fX6XDVNrIiGYS0Pj9+R8yIIYSD/mCx2b16Ws9itljKSPg==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
-
-  state-local@1.0.7:
-    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
-
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
-  vite@5.4.19:
-    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
-snapshots:
-
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-
-  '@babel/code-frame@7.27.1':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.28.0': {}
-
-  '@babel/core@7.28.0':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helpers': 7.27.6
-      '@babel/parser': 7.28.0
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.0
-      convert-source-map: 2.0.0
-      debug: 4.4.1
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.28.0':
-    dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.0
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-      jsesc: 3.1.0
-
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.28.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.25.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-plugin-utils@7.27.1': {}
-
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.27.1': {}
-
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.27.6':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.0
-
-  '@babel/parser@7.28.0':
-    dependencies:
-      '@babel/types': 7.28.0
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.0
-
-  '@babel/traverse@7.28.0':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.0
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.0
-      debug: 4.4.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.28.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
-  '@jridgewell/gen-mapping@0.3.12':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/sourcemap-codec@1.5.4': {}
-
-  '@jridgewell/trace-mapping@0.3.29':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.4
-
-  '@monaco-editor/loader@1.5.0':
-    dependencies:
-      state-local: 1.0.7
-
-  '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@monaco-editor/loader': 1.5.0
-      monaco-editor: 0.52.2
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@rolldown/pluginutils@1.0.0-beta.19': {}
-
-  '@rollup/rollup-android-arm-eabi@4.44.2':
-    optional: true
-
-  '@rollup/rollup-android-arm64@4.44.2':
-    optional: true
-
-  '@rollup/rollup-darwin-arm64@4.44.2':
-    optional: true
-
-  '@rollup/rollup-darwin-x64@4.44.2':
-    optional: true
-
-  '@rollup/rollup-freebsd-arm64@4.44.2':
-    optional: true
-
-  '@rollup/rollup-freebsd-x64@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm-gnueabihf@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm-musleabihf@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-arm64-musl@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-loongarch64-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-powerpc64le-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-riscv64-musl@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-s390x-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-x64-gnu@4.44.2':
-    optional: true
-
-  '@rollup/rollup-linux-x64-musl@4.44.2':
-    optional: true
-
-  '@rollup/rollup-win32-arm64-msvc@4.44.2':
-    optional: true
-
-  '@rollup/rollup-win32-ia32-msvc@4.44.2':
-    optional: true
-
-  '@rollup/rollup-win32-x64-msvc@4.44.2':
-    optional: true
-
-  '@types/babel__core@7.20.5':
-    dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.0
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.7
-
-  '@types/babel__generator@7.27.0':
-    dependencies:
-      '@babel/types': 7.28.0
-
-  '@types/babel__template@7.4.4':
-    dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.0
-
-  '@types/babel__traverse@7.20.7':
-    dependencies:
-      '@babel/types': 7.28.0
-
-  '@types/estree@1.0.8': {}
-
-  '@vitejs/plugin-react@4.6.0(vite@5.4.19)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
-      '@rolldown/pluginutils': 1.0.0-beta.19
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 5.4.19
-    transitivePeerDependencies:
-      - supports-color
-
-  browserslist@4.25.1:
-    dependencies:
-      caniuse-lite: 1.0.30001727
-      electron-to-chromium: 1.5.182
-      node-releases: 2.0.19
-      update-browserslist-db: 1.1.3(browserslist@4.25.1)
-
-  caniuse-lite@1.0.30001727: {}
-
-  convert-source-map@2.0.0: {}
-
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
-
-  electron-to-chromium@1.5.182: {}
-
-  esbuild@0.21.5:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
-
-  escalade@3.2.0: {}
-
-  fsevents@2.3.3:
-    optional: true
-
-  gensync@1.0.0-beta.2: {}
-
-  js-tokens@4.0.0: {}
-
-  jsesc@3.1.0: {}
-
-  json5@2.2.3: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
-  lru-cache@5.1.1:
-    dependencies:
-      yallist: 3.1.1
-
-  monaco-editor@0.52.2: {}
-
-  ms@2.1.3: {}
-
-  nanoid@3.3.11: {}
-
-  node-releases@2.0.19: {}
-
-  picocolors@1.1.1: {}
-
-  postcss@8.5.6:
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  react-dom@18.3.1(react@18.3.1):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
-
-  react-refresh@0.17.0: {}
-
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
-
-  rollup@4.44.2:
-    dependencies:
-      '@types/estree': 1.0.8
-    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.44.2
-      '@rollup/rollup-android-arm64': 4.44.2
-      '@rollup/rollup-darwin-arm64': 4.44.2
-      '@rollup/rollup-darwin-x64': 4.44.2
-      '@rollup/rollup-freebsd-arm64': 4.44.2
-      '@rollup/rollup-freebsd-x64': 4.44.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.44.2
-      '@rollup/rollup-linux-arm-musleabihf': 4.44.2
-      '@rollup/rollup-linux-arm64-gnu': 4.44.2
-      '@rollup/rollup-linux-arm64-musl': 4.44.2
-      '@rollup/rollup-linux-loongarch64-gnu': 4.44.2
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.44.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.44.2
-      '@rollup/rollup-linux-riscv64-musl': 4.44.2
-      '@rollup/rollup-linux-s390x-gnu': 4.44.2
-      '@rollup/rollup-linux-x64-gnu': 4.44.2
-      '@rollup/rollup-linux-x64-musl': 4.44.2
-      '@rollup/rollup-win32-arm64-msvc': 4.44.2
-      '@rollup/rollup-win32-ia32-msvc': 4.44.2
-      '@rollup/rollup-win32-x64-msvc': 4.44.2
-      fsevents: 2.3.3
-
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-
-  semver@6.3.1: {}
-
-  source-map-js@1.2.1: {}
-
-  state-local@1.0.7: {}
-
-  update-browserslist-db@1.1.3(browserslist@4.25.1):
-    dependencies:
-      browserslist: 4.25.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
-  vite@5.4.19:
-    dependencies:
-      esbuild: 0.21.5
-      postcss: 8.5.6
-      rollup: 4.44.2
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  yallist@3.1.1: {}
diff --git a/screencoder/demo/public/assets/debug/bboxes.json b/screencoder/demo/public/assets/debug/bboxes.json
deleted file mode 100644
index 958cb8f6e3726568ffe415c3ae37f8037943ec1c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes.json
+++ /dev/null
@@ -1,86 +0,0 @@
-[
-  {
-    "id": "ph0",
-    "x": 127,
-    "y": 200,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph1",
-    "x": 148,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph2",
-    "x": 1231,
-    "y": 200,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph3",
-    "x": 1252,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph4",
-    "x": 2335,
-    "y": 200,
-    "w": 1033,
-    "h": 505
-  },
-  {
-    "id": "ph5",
-    "x": 2356,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph6",
-    "x": 127,
-    "y": 937,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph7",
-    "x": 148,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph8",
-    "x": 1231,
-    "y": 937,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph9",
-    "x": 1252,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph10",
-    "x": 2335,
-    "y": 937,
-    "w": 1033,
-    "h": 505
-  },
-  {
-    "id": "ph11",
-    "x": 2356,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/bboxes_test.json b/screencoder/demo/public/assets/debug/bboxes_test.json
deleted file mode 100644
index 958cb8f6e3726568ffe415c3ae37f8037943ec1c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes_test.json
+++ /dev/null
@@ -1,86 +0,0 @@
-[
-  {
-    "id": "ph0",
-    "x": 127,
-    "y": 200,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph1",
-    "x": 148,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph2",
-    "x": 1231,
-    "y": 200,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph3",
-    "x": 1252,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph4",
-    "x": 2335,
-    "y": 200,
-    "w": 1033,
-    "h": 505
-  },
-  {
-    "id": "ph5",
-    "x": 2356,
-    "y": 726,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph6",
-    "x": 127,
-    "y": 937,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph7",
-    "x": 148,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph8",
-    "x": 1231,
-    "y": 937,
-    "w": 1061,
-    "h": 505
-  },
-  {
-    "id": "ph9",
-    "x": 1252,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  },
-  {
-    "id": "ph10",
-    "x": 2335,
-    "y": 937,
-    "w": 1033,
-    "h": 505
-  },
-  {
-    "id": "ph11",
-    "x": 2356,
-    "y": 1463,
-    "w": 63,
-    "h": 63
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/bboxes_test_demo1.json b/screencoder/demo/public/assets/debug/bboxes_test_demo1.json
deleted file mode 100644
index 81c95561a81e1cef396cc80979ffd4ea422485da..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes_test_demo1.json
+++ /dev/null
@@ -1,130 +0,0 @@
-{
-  "regions": [
-    {
-      "id": "1",
-      "x": 0.004750593824228029,
-      "y": 0.0,
-      "w": 0.02642517814726841,
-      "h": 0.9970760233918129
-    },
-    {
-      "id": "2",
-      "x": 0.027612826603325414,
-      "y": 0.0,
-      "w": 0.9706057007125891,
-      "h": 0.0608187134502924
-    },
-    {
-      "id": "3",
-      "x": 0.03770783847980998,
-      "y": 0.05321637426900585,
-      "w": 0.9706057007125891,
-      "h": 0.05146198830409357
-    },
-    {
-      "id": "4",
-      "x": 0.03770783847980998,
-      "y": 0.10526315789473684,
-      "w": 0.9706057007125891,
-      "h": 0.8912280701754386
-    }
-  ],
-  "placeholders": [
-    {
-      "id": "ph0",
-      "x": 0.03770783847980998,
-      "y": 0.10526315789473684,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph1",
-      "x": 0.043942992874109264,
-      "y": 0.3830409356725146,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    },
-    {
-      "id": "ph2",
-      "x": 0.36549881235154397,
-      "y": 0.10526315789473684,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph3",
-      "x": 0.37173396674584325,
-      "y": 0.3830409356725146,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    },
-    {
-      "id": "ph4",
-      "x": 0.6932897862232779,
-      "y": 0.10526315789473684,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph5",
-      "x": 0.6995249406175772,
-      "y": 0.3830409356725146,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    },
-    {
-      "id": "ph6",
-      "x": 0.03770783847980998,
-      "y": 0.49415204678362573,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph7",
-      "x": 0.043942992874109264,
-      "y": 0.7719298245614035,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    },
-    {
-      "id": "ph8",
-      "x": 0.36549881235154397,
-      "y": 0.49415204678362573,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph9",
-      "x": 0.37173396674584325,
-      "y": 0.7719298245614035,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    },
-    {
-      "id": "ph10",
-      "x": 0.6932897862232779,
-      "y": 0.49415204678362573,
-      "w": 0.31502375296912116,
-      "h": 0.26666666666666666,
-      "region_id": "4"
-    },
-    {
-      "id": "ph11",
-      "x": 0.6995249406175772,
-      "y": 0.7719298245614035,
-      "w": 0.018705463182897862,
-      "h": 0.03333333333333333,
-      "region_id": "4"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/bboxes_test_demo2.json b/screencoder/demo/public/assets/debug/bboxes_test_demo2.json
deleted file mode 100644
index d747e305f1830993672c0400b51946e737e6747c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes_test_demo2.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-  "regions": [
-    {
-      "id": "1",
-      "x": 0.004555010511562719,
-      "y": 0.0011806375442739079,
-      "w": 0.14856341976173792,
-      "h": 0.9893742621015348
-    },
-    {
-      "id": "2",
-      "x": 0.24456902592852137,
-      "y": 0.0011806375442739079,
-      "w": 0.8405746320953048,
-      "h": 0.29988193624557263
-    },
-    {
-      "id": "3",
-      "x": 0.24456902592852137,
-      "y": 0.30165289256198347,
-      "w": 0.8405746320953048,
-      "h": 0.15348288075560804
-    },
-    {
-      "id": "4",
-      "x": 0.24456902592852137,
-      "y": 0.4557260920897285,
-      "w": 0.8405746320953048,
-      "h": 0.5348288075560803
-    }
-  ],
-  "placeholders": [
-    {
-      "id": "ph0",
-      "x": 0.2697967764540995,
-      "y": 0.09563164108618655,
-      "w": 0.11247372109320253,
-      "h": 0.19952774498229045,
-      "region_id": "2"
-    },
-    {
-      "id": "ph1",
-      "x": 0.25718290119131043,
-      "y": 0.3270365997638725,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph2",
-      "x": 0.38297126839523477,
-      "y": 0.31286894923258557,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph3",
-      "x": 0.508759635599159,
-      "y": 0.3270365997638725,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph4",
-      "x": 0.6338472319551507,
-      "y": 0.3270365997638725,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph5",
-      "x": 0.7585844428871759,
-      "y": 0.3270365997638725,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph6",
-      "x": 0.8836720392431675,
-      "y": 0.3270365997638725,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph7",
-      "x": 1.0098107918710582,
-      "y": 0.31286894923258557,
-      "w": 0.06236860546601261,
-      "h": 0.11097992916174734,
-      "region_id": "3"
-    },
-    {
-      "id": "ph8",
-      "x": 0.24456902592852137,
-      "y": 0.5377804014167651,
-      "w": 0.27610371408549406,
-      "h": 0.5330578512396694,
-      "region_id": "4"
-    },
-    {
-      "id": "ph9",
-      "x": 0.52697967764541,
-      "y": 0.5377804014167651,
-      "w": 0.27610371408549406,
-      "h": 0.5330578512396694,
-      "region_id": "4"
-    },
-    {
-      "id": "ph10",
-      "x": 0.8093903293622985,
-      "y": 0.5377804014167651,
-      "w": 0.27610371408549406,
-      "h": 0.5330578512396694,
-      "region_id": "4"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/bboxes_test_demo4.json b/screencoder/demo/public/assets/debug/bboxes_test_demo4.json
deleted file mode 100644
index c96fd4358000e7bd21dab8774fb9789d0d8f583e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes_test_demo4.json
+++ /dev/null
@@ -1,91 +0,0 @@
-{
-  "regions": [
-    {
-      "id": "1",
-      "x": 0.012174643157010915,
-      "y": 0.007801418439716312,
-      "w": 0.9718723761544921,
-      "h": 0.07730496453900709
-    },
-    {
-      "id": "2",
-      "x": 0.012174643157010915,
-      "y": 0.12624113475177304,
-      "w": 0.6599496221662469,
-      "h": 0.8631205673758865
-    },
-    {
-      "id": "3",
-      "x": 0.6863979848866498,
-      "y": 0.12624113475177304,
-      "w": 0.2976490344248531,
-      "h": 0.8631205673758865
-    }
-  ],
-  "placeholders": [
-    {
-      "id": "ph0",
-      "x": 0.031066330814441646,
-      "y": 0.25957446808510637,
-      "w": 0.09991603694374475,
-      "h": 0.1773049645390071,
-      "region_id": "2"
-    },
-    {
-      "id": "ph1",
-      "x": 0.031066330814441646,
-      "y": 0.626241134751773,
-      "w": 0.02476910159529807,
-      "h": 0.04397163120567376,
-      "region_id": "2"
-    },
-    {
-      "id": "ph2",
-      "x": 0.06255247691015953,
-      "y": 0.626241134751773,
-      "w": 0.02476910159529807,
-      "h": 0.04397163120567376,
-      "region_id": "2"
-    },
-    {
-      "id": "ph3",
-      "x": 0.09361880772460117,
-      "y": 0.626241134751773,
-      "w": 0.02476910159529807,
-      "h": 0.04397163120567376,
-      "region_id": "2"
-    },
-    {
-      "id": "ph4",
-      "x": 0.031066330814441646,
-      "y": 0.7851063829787234,
-      "w": 0.018471872376154493,
-      "h": 0.03333333333333333,
-      "region_id": "2"
-    },
-    {
-      "id": "ph5",
-      "x": 0.031066330814441646,
-      "y": 0.8290780141843972,
-      "w": 0.018471872376154493,
-      "h": 0.03333333333333333,
-      "region_id": "2"
-    },
-    {
-      "id": "ph6",
-      "x": 0.031066330814441646,
-      "y": 0.8765957446808511,
-      "w": 0.015533165407220823,
-      "h": 0.027659574468085105,
-      "region_id": "2"
-    },
-    {
-      "id": "ph7",
-      "x": 0.1570109151973132,
-      "y": 0.8794326241134752,
-      "w": 0.012174643157010915,
-      "h": 0.02198581560283688,
-      "region_id": "2"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/bboxes_test_ins.json b/screencoder/demo/public/assets/debug/bboxes_test_ins.json
deleted file mode 100644
index 0d44fcb940972625964c351982f33cbb3b544dfc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/bboxes_test_ins.json
+++ /dev/null
@@ -1,79 +0,0 @@
-[
-  {
-    "id": "ph0",
-    "x": 758,
-    "y": 127,
-    "w": 321,
-    "h": 321
-  },
-  {
-    "id": "ph3",
-    "x": 749,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph4",
-    "x": 970,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph5",
-    "x": 1192,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph6",
-    "x": 1406,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph7",
-    "x": 1620,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph8",
-    "x": 1834,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph9",
-    "x": 2057,
-    "y": 503,
-    "w": 178,
-    "h": 178
-  },
-  {
-    "id": "ph10",
-    "x": 713,
-    "y": 864,
-    "w": 701,
-    "h": 830
-  },
-  {
-    "id": "ph11",
-    "x": 1432,
-    "y": 864,
-    "w": 701,
-    "h": 830
-  },
-  {
-    "id": "ph12",
-    "x": 2152,
-    "y": 864,
-    "w": 701,
-    "h": 830
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph7.png b/screencoder/demo/public/assets/debug/cropped_images_demo1/ph7.png
deleted file mode 100644
index 311e42e6d3fdbf51b62f74f615dc506de65bb51e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph7.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:37921faad39bb39e3dd6743ee179d1d60bbdb52f05ae98d19eb7edd8a66a8135
-size 3755
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph9.png b/screencoder/demo/public/assets/debug/cropped_images_demo1/ph9.png
deleted file mode 100644
index 5012366464e6edb9ebfce00739019d42afb3ac1b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo1/ph9.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:507292931d104e497cc15454eeb74826b7ffccb38693535340ea9fc35c77eb27
-size 8836
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph0.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph0.png
deleted file mode 100644
index 37c023c0ed0325a965cd9fde4d939280b27c0ba1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph0.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6bbb665a9e7f913ad61997a1edae3b4aebaf7e96c8c4156306da64b070f7caea
-size 129363
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph1.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph1.png
deleted file mode 100644
index 180effbecac93702af5d38d67a8d79e77fde1a7f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e17a1a4ec7e266e9d6f6aed793009c6b128c724994520657dc3041f3c4d63254
-size 43578
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph10.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph10.png
deleted file mode 100644
index 35ce3991d4c61bcb844dff5e3bb11e448ba43970..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph10.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f8ea9b2c9b11c56d4e08a56a65f756018ec2915c36d20e9f8d6d09363a4c4fd8
-size 860989
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph2.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph2.png
deleted file mode 100644
index d2370b747b6a65a682b525dc015faefbc30cb8a1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:64041fe82480ee37a2bfe945b8c5b55350e744d01ac50b2c266f0649d6b68c43
-size 39314
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph3.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph3.png
deleted file mode 100644
index 89307e2612629b69e57913e08282692f79900410..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:790755c07f39818c956f76f344d93b7759050e9b5b397833f2d429ddc68da6c9
-size 45343
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph4.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph4.png
deleted file mode 100644
index 7404a6c2bb8b236f00ae583ef7e5d4e3ef180ed8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aee7368b44ae810f6c834f88923c50c81b3d10522b3c7c76e0b1a312369f25b2
-size 45005
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph5.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph5.png
deleted file mode 100644
index 848c3107b5594431577a0cf0478b5b2a6c45fbcc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph5.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:bf79c260f100b9c7890e4fad54ae9f213cc52b9cc0a8c3f058cf2b32db9d5ed8
-size 23253
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph6.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph6.png
deleted file mode 100644
index 9b972ca40a9a45addb34728d14f10c739d00e560..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph6.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6ea142eabbd270b8c7a4ac2241dadaea619d0de1e31c37685a2fa08859fe9230
-size 44987
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph7.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph7.png
deleted file mode 100644
index 5388fc2a23df241b17cea7fa8b0481cfa184bfec..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph7.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:75afca4b8bf59b9d51b1b3c0eb6d9c43e68d0c3d9744d5cde8c2c4f91b599b3a
-size 38925
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph8.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph8.png
deleted file mode 100644
index ac5f447478160104ebef6a4db42ea695def71553..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph8.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c75e5408d3bf276017949c96f327bdd5eecd3a69be3350d95a3a56a610f6542b
-size 731708
diff --git a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph9.png b/screencoder/demo/public/assets/debug/cropped_images_demo2/ph9.png
deleted file mode 100644
index be4a4e87add41b50ad9b627eb388d9baa84fff97..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/cropped_images_demo2/ph9.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a2b9fa325df64911e514430821a6688064bb00db53f365da440e0cd2ea4cd30e
-size 866752
diff --git a/screencoder/demo/public/assets/debug/debug_gray_bboxes.png b/screencoder/demo/public/assets/debug/debug_gray_bboxes.png
deleted file mode 100644
index fa51413c9db0fbf98bb3a7413386b0383cb8f143..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/debug_gray_bboxes.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b9197e5390f537494eb54faa30820307a730ab9f8926977b12d99457919c4ce6
-size 4602078
diff --git a/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo1.png b/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo1.png
deleted file mode 100644
index 7078b8707164ba9332acc34bc7e740a3865a5a8b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f232dda3402122bfbd2bfd4b1ffec41cf3b3bb13ea6e38e0cc50514fba6f2e81
-size 3264122
diff --git a/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo2.png b/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo2.png
deleted file mode 100644
index 5bf00d4cbf04021227d6baa0d0ec9fd7f241ed0a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/debug_gray_bboxes_test_demo2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c39ffb2e089e044c74595dce43c4cc2a5e73068e7e48e579cb9a142e09a87b96
-size 1814700
diff --git a/screencoder/demo/public/assets/debug/debug_overlay.png b/screencoder/demo/public/assets/debug/debug_overlay.png
deleted file mode 100644
index 0f9a59b1b4027289a8cb9b6a8768b8906a29582d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/debug_overlay.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ca17627f24129971421651cddb153d15f2de024071a08b73889df3d9b99424ac
-size 3260720
diff --git a/screencoder/demo/public/assets/debug/final_demo1.html b/screencoder/demo/public/assets/debug/final_demo1.html
deleted file mode 100644
index 7e2b3cfeb5f483187f38f855c500f3db62b85bde..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/final_demo1.html
+++ /dev/null
@@ -1,241 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="flex flex-col items-center space-y-6 p-4">
-<!-- 汉堡菜单 -->
-<div class="flex flex-col items-center">
-<svg class="h-6 w-8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="flex flex-col items-center">
-<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="text-sm mt-1">首页</span>
-</div>
-<!-- Shorts -->
-<div class="flex flex-col items-center">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="text-sm mt-1">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="flex flex-col items-center">
-<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="text-sm mt-1">订阅</span>
-</div>
-<!-- 我 -->
-<div class="flex flex-col items-center">
-<svg class="h-6 w-8" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="text-sm mt-1">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph0.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       26:24
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph1.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph2.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       49:40
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph3.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph4.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       11:51
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph5.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph6.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-gray-300 text-gray-700 text-xs px-1 py-0.5 rounded">
-       →
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph7.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph8.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       12:44
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph9.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 rounded-t object-cover" style="background-image: url('cropped_images_demo1/ph10.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       36:54
-      </div>
-<div class="p-2 flex">
-<div class="w-6 h-6 rounded-full mr-2 object-cover" style="background-image: url('cropped_images_demo1/ph11.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;"></div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/assets/debug/final_demo2.html b/screencoder/demo/public/assets/debug/final_demo2.html
deleted file mode 100644
index 08e0e4f335dc01b4dd92a087cb941c4d1dd8a46e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/final_demo2.html
+++ /dev/null
@@ -1,357 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 14.891380518570427%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 24.487035739313246%; top: 0.1770956316410862%; width: 84.09250175192712%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-8 p-6">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 rounded-full" src="cropped_images_demo2/ph0.png"/>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600">
-<svg class="inline w-5 h-5" fill="currentColor" viewbox="0 0 20 20">
-<path d="M13.5 6a2.5 2.5 0 10-5 0v8a2.5 2.5 0 005 0V6zm-1.25 7a1.25 1.25 0 112.5 0v1.5a.75.75 0 01-1.5 0v-1.5a1.25 1.25 0 01-1.25-1.25zM6.5 3a1 1 0 00-1 1v12a1 1 0 001 1h7a1 1 0 001-1V4a1 1 0 00-1-1h-7z">
-</path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 24.487035739313246%; top: 30.22432113341204%; width: 84.09250175192712%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-20 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph1.png"/>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph2.png"/>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph3.png"/>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph4.png"/>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph5.png"/>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph6.png"/>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<img class="w-20 h-20 rounded-full" src="cropped_images_demo2/ph7.png"/>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 24.487035739313246%; top: 45.63164108618654%; width: 84.09250175192712%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<img class="w-full h-96" src="cropped_images_demo2/ph8.png"/>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<img class="w-full h-96" src="cropped_images_demo2/ph9.png"/>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<img class="w-full h-96" src="cropped_images_demo2/ph10.png"/>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/assets/debug/mapping.json b/screencoder/demo/public/assets/debug/mapping.json
deleted file mode 100644
index 364aeb8ae1f5eec32ece5723068a9c29ba6b36af..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/mapping.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "scale": 4.14859437751004,
-  "dx": -14.623466634208853,
-  "dy": 16.50960888201257,
-  "mapping": {
-    "ph0": [
-      22
-    ],
-    "ph2": [
-      23
-    ],
-    "ph4": [
-      24
-    ],
-    "ph6": [
-      63
-    ],
-    "ph8": [
-      64
-    ],
-    "ph10": [
-      65
-    ],
-    "ph1": [],
-    "ph3": [],
-    "ph5": [],
-    "ph7": [],
-    "ph9": [],
-    "ph11": []
-  }
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/debug/test_demo1.html b/screencoder/demo/public/assets/debug/test_demo1.html
deleted file mode 100644
index b0732b98f8d5ef087b9c99ee574c2da2939efd1b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/test_demo1.html
+++ /dev/null
@@ -1,253 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Bounding Boxes Layout</title>
-  <style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-
-  <!-- ───────────── 左侧竖栏 ───────────── -->
-  <div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-    <div class="flex flex-col items-center space-y-6 p-4">
-
-      <!-- 汉堡菜单 -->
-      <div class="flex flex-col items-center">
-        <svg class="h-6 w-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-          <path d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </div>
-
-      <!-- 首页 -->
-      <div class="flex flex-col items-center">
-        <svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"/>
-        </svg>
-        <span class="text-sm mt-1">首页</span>
-      </div>
-
-      <!-- Shorts -->
-      <div class="flex flex-col items-center">
-        <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-        <svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"/>
-          <polygon fill="#fff" points="9 8 9 16 15 12"/>
-        </svg>
-        <span class="text-sm mt-1">Shorts</span>
-      </div>
-
-      <!-- 订阅 -->
-      <div class="flex flex-col items-center">
-        <svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
-          <rect x="2" y="6" width="20" height="12" rx="2"></rect>
-          <polygon fill="#fff" points="10 9 16 12 10 15"/>
-        </svg>
-        <span class="text-sm mt-1">订阅</span>
-      </div>
-
-      <!-- 我 -->
-      <div class="flex flex-col items-center">
-        <svg class="h-6 w-8" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="12" cy="8" r="4"></circle>
-          <path d="M4 20a8 8 0 0116 0H4z"></path>
-        </svg>
-        <span class="text-sm mt-1">我</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- ───────────── 顶部导航 ───────────── -->
-  <div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-    <div class="flex items-center">
-
-      <!-- Logo -->
-      <div class="flex items-center ml-4 space-x-1">
-        <svg class="w-8 h-6" viewBox="0 0 90 60">
-          <rect width="90" height="60" rx="12" fill="#FF0000"></rect>
-          <polygon points="36,18 60,30 36,42" fill="#fff"></polygon>
-        </svg>
-        <span class="text-xl font-bold">YouTube</span>
-        <span class="text-sm font-medium">HK</span>
-      </div>
-
-      <!-- 搜索 -->
-      <div class="flex items-center mx-10 flex-grow">
-        <input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-        <button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-          <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"/>
-          </svg>
-        </button>
-        <!-- 语音搜索 -->
-        <button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-          <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"/>
-            <path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12 17v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M8 21h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- 创建 / 通知 / 头像 -->
-      <div class="flex items-center mr-4 space-x-4">
-
-        <!-- 创建(摄像机 +) -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"/>
-            <rect x="9" y="9" width="6" height="6" rx="1" fill="#fff"/>
-            <path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-
-        <!-- 通知铃铛 -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"/>
-            <path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"/>
-          </svg>
-        </button>
-
-        <!-- 头像 -->
-        <div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-      </div>
-    </div>
-  </div>
-  <div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-    <div class="flex items-center space-x-2">
-      <span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-    </div>
-  </div>
-   <div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-    <div class="grid grid-cols-3 gap-4">
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       26:24
-      </div>
-      <div class="p-2 flex">
-        <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-        <p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       49:40
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-        <p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       11:51
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-        <p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-gray-300 text-gray-700 text-xs px-1 py-0.5 rounded">
-       →
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-        <p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       12:44
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-        <p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 rounded-t object-cover bg-gray-400"></div>
-      <div class="absolute bottom-2 right-2 bg-black text-white text-xs px-1 py-0.5 rounded">
-       36:54
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 rounded-full mr-2 object-cover bg-gray-400"></div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-        <p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-        </p>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/assets/debug/test_demo2.html b/screencoder/demo/public/assets/debug/test_demo2.html
deleted file mode 100644
index 1d16e1bfe7479d710c558b111fae11c3fd9a206f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/test_demo2.html
+++ /dev/null
@@ -1,382 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 14.891380518570427%; height: 98.99645808736717%;">
-    <div class="flex flex-col justify-between h-full p-4 bg-white">
-     <!-- 主要导航区域 -->
-     <div class="flex flex-col space-y-6">
-      <div class="text-3xl font-bold">
-       Instagram
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-        </path>
-       </svg>
-       <span>
-        首页
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-        </path>
-       </svg>
-       <span>
-        搜索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        探索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-        </path>
-       </svg>
-       <span>
-        Reels
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-        </path>
-       </svg>
-       <span>
-        消息
-       </span>
-      </div>
-      <div class="flex items-center space-x-4 relative">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-        </path>
-       </svg>
-       <span>
-        通知
-       </span>
-       <span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-        </path>
-       </svg>
-       <span>
-        创建
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-        <circle cx="12" cy="12" r="4">
-        </circle>
-       </svg>
-       <span>
-        主页
-       </span>
-      </div>
-     </div>
-     
-     <!-- 底部导航区域 -->
-     <div class="flex flex-col space-y-4">
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        Threads
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-        </path>
-       </svg>
-       <span>
-        更多
-       </span>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 24.487035739313246%; top: 0.1770956316410862%; width: 84.09250175192712%; height: 30.047225501770956%;">
-    <div class="flex items-center space-x-8 p-6">
-     <!-- 头像及渐变环 -->
-     <div class="relative">
-      <svg class="w-40 h-40" viewbox="0 0 200 200">
-       <defs>
-        <lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-         <stop offset="0%" stop-color="#ff28a4">
-         </stop>
-         <stop offset="100%" stop-color="#ffb646">
-         </stop>
-        </lineargradient>
-       </defs>
-       <circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-       </circle>
-      </svg>
-      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-      </div>
-     </div>
-     <!-- 右侧信息区域 -->
-     <div class="flex flex-col">
-      <!-- 顶部栏：用户名 + 认证 + 按钮 -->
-      <div class="flex items-center space-x-2">
-       <h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-       <!-- 认证徽章 -->
-       <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-        </path>
-       </svg>
-       <button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-       <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-         </path>
-        </svg>
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-         </path>
-        </svg>
-       </button>
-      </div>
-      <!-- 统计数据 -->
-      <div class="mt-4 flex space-x-6">
-       <div>
-        <span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-       <div>
-        <span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-       <div>
-        <span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-      </div>
-      <!-- 名字 -->
-      <div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-      <!-- @用户名 -->
-      <div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-      <!-- 简介 -->
-      <div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-       <svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-        </path>
-       </svg>
-      </div>
-      <!-- 链接 -->
-      <div class="mt-1 text-blue-600">
-       <svg class="inline w-5 h-5" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M13.5 6a2.5 2.5 0 10-5 0v8a2.5 2.5 0 005 0V6zm-1.25 7a1.25 1.25 0 112.5 0v1.5a.75.75 0 01-1.5 0v-1.5a1.25 1.25 0 01-1.25-1.25zM6.5 3a1 1 0 00-1 1v12a1 1 0 001 1h7a1 1 0 001-1V4a1 1 0 00-1-1h-7z">
-        </path>
-       </svg>
-       linktr.ee/mirandakerr
-      </div>
-      <!-- 关注者提示 -->
-      <div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 24.487035739313246%; top: 30.22432113341204%; width: 84.09250175192712%; height: 15.407319952774499%;">
-    <div class="flex items-center space-x-20 overflow-x-auto px-4 py-2">
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-400" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="4" style="left: 24.487035739313246%; top: 45.63164108618654%; width: 84.09250175192712%; height: 53.54191263282172%;">
-    <div>
-     <div class="flex justify-center border-b">
-      <div class="flex items-center px-4 py-3 border-b-2 border-black">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        帖子
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        REELS
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        标记内容
-       </span>
-      </div>
-     </div>
-     <div class="grid grid-cols-3 gap-2 mt-2">
-      <div class="relative">
-       <div class="bg-gray-400 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-       <div class="bg-gray-400 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-        <div class="bg-gray-400 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/assets/debug/test_demo4.html b/screencoder/demo/public/assets/debug/test_demo4.html
deleted file mode 100644
index 00b68ce30974bededbea2746e9759f35aa28a9a3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/debug/test_demo4.html
+++ /dev/null
@@ -1,310 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 1.2594458438287155%; top: 0.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-    <div class="flex flex-row items-center">
-     <!-- LinkedIn Logo -->
-     <svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-      <text fill="blue" font-family="sans-serif" font-size="20" x="0" y="20">
-       Linked
-      </text>
-      <rect fill="blue" height="16" width="20" x="54" y="4">
-      </rect>
-      <text fill="white" font-family="sans-serif" font-size="16" x="58" y="18">
-       in
-      </text>
-     </svg>
-     <!-- Top Content -->
-     <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-      <svg class="h-6 w-6" viewbox="0 0 24 24">
-       <path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-       </path>
-      </svg>
-      <span class="text-xs">
-       Top Content
-      </span>
-     </div>
-     <!-- People (with underline) -->
-     <div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-      <svg class="h-6 w-6" viewbox="0 0 24 24">
-       <path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-       </path>
-      </svg>
-      <span class="text-xs">
-       People
-      </span>
-     </div>
-     <!-- Learning -->
-     <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-      <svg class="h-6 w-6" viewbox="0 0 24 24">
-       <path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-       </path>
-      </svg>
-      <span class="text-xs">
-       Learning
-      </span>
-     </div>
-     <!-- Jobs -->
-     <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-      <svg class="h-6 w-6" viewbox="0 0 24 24">
-       <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-       </path>
-      </svg>
-      <span class="text-xs">
-       Jobs
-      </span>
-     </div>
-     <!-- Games -->
-     <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-      <svg class="h-6 w-6" viewbox="0 0 24 24">
-       <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V6z" fill="currentColor">
-       </path>
-      </svg>
-      <span class="text-xs">
-       Games
-      </span>
-     </div>
-     <!-- Divider -->
-     <div class="border-l border-gray-300 h-6 mx-4">
-     </div>
-     <!-- Join now -->
-     <div class="text-black text-sm font-medium cursor-pointer mr-4">
-      Join now
-     </div>
-     <!-- Sign in button -->
-     <button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-      Sign in
-     </button>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 1.2594458438287155%; top: 12.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-    <div class="bg-white shadow rounded">
-     <div class="w-full h-40 bg-gray-300">
-     </div>
-     <div class="relative ml-6 -mt-16">
-      <div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-      </div>
-     </div>
-     <div class="p-6">
-      <div class="flex justify-between items-center mb-2">
-       <h1 class="text-2xl font-bold">
-        Andrej Karpathy
-       </h1>
-       <div class="text-gray-500">
-        ...
-       </div>
-      </div>
-      <div class="flex items-center space-x-2 text-gray-700 mb-2">
-       <span>
-        San Francisco, California, United States
-       </span>
-       <span class="text-gray-500">
-        ·
-       </span>
-       <a class="text-blue-600" href="#">
-        Contact Info
-       </a>
-      </div>
-      <div class="flex items-center space-x-2 text-gray-600 mb-4">
-       <span>
-        80K followers
-       </span>
-       <span class="text-gray-500">
-        ·
-       </span>
-       <span>
-        280 connections
-       </span>
-      </div>
-      <div class="flex items-center space-x-2 mb-4">
-       <div class="flex space-x-2">
-        <div class="w-8 h-8 bg-gray-400 rounded-full">
-        </div>
-        <div class="w-8 h-8 bg-gray-400 rounded-full">
-        </div>
-        <div class="w-8 h-8 bg-gray-400 rounded-full">
-        </div>
-       </div>
-       <a class="text-blue-600" href="#">
-        See your mutual connections
-       </a>
-      </div>
-      <div class="flex space-x-4 mb-6">
-       <button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-        Join to view profile
-       </button>
-       <button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-        Message
-       </button>
-      </div>
-      <div class="flex flex-col space-y-2">
-       <div class="flex items-center space-x-2">
-        <div class="w-6 h-6 bg-gray-400">
-        </div>
-        <a class="text-blue-600" href="#">
-         Tesla
-        </a>
-       </div>
-       <div class="flex items-center space-x-2">
-        <div class="w-6 h-6 bg-gray-400">
-        </div>
-        <a class="text-blue-600" href="#">
-         Stanford University
-        </a>
-       </div>
-       <div class="flex items-center space-x-2">
-        <div class="w-5 h-5 bg-gray-400">
-        </div>
-        <a class="text-blue-600" href="#">
-         Personal Website
-        </a>
-        <div class="w-4 h-4 bg-gray-400">
-        </div>
-       </div>
-      </div>
-      <div class="mt-8">
-       <h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-       <div class="flex items-center space-x-2">
-        <span>
-         https://karpathy.ai/
-        </span>
-        <a class="text-blue-600" href="#">
-         see more
-        </a>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 68.68178001679262%; top: 12.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-    <h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-    <div class="flex items-center mb-4">
-     <img alt="Manohar Paluri" class="w-12 h-12 rounded-full mr-4" src="manohar.jpg"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="Renjun Xu, PhD" class="w-12 h-12 rounded-full mr-4" src="renjun.jpg"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-      <p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="Christopher Kanan" class="w-12 h-12 rounded-full mr-4" src="christopher.jpg"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-      <p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="Micael Carvalho" class="w-12 h-12 rounded-full mr-4" src="micael.jpg"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="Joel Tetreault" class="w-12 h-12 rounded-full mr-4" src="joel.jpg"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-      <p class="text-gray-600">
-       New York, NY
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/assets/demo1.png b/screencoder/demo/public/assets/demo1.png
deleted file mode 100644
index bfbb8da7a21bd35998421253c4cbef17a23a964a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b832febac9fd78a25da618e1fddf0d5a524916b1cdf5e8c93c3839643e28597b
-size 3427850
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_1.png b/screencoder/demo/public/assets/demo1_cropped/demo1_1.png
deleted file mode 100644
index b84d83fda034a6e69502e79303d6e8929ed9673e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b2630f22385962162b57e106cc6759383d1fe0604b761776127730b6128b9d66
-size 433744
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_2.png b/screencoder/demo/public/assets/demo1_cropped/demo1_2.png
deleted file mode 100644
index 3bfd52bd820d5d14527b5a1844a8c1ea333c43c9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a07b2410d667cdd1560aa7c4b1c4c686b97b6fec594cca6b06740f6ddfe40d69
-size 208914
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_3.png b/screencoder/demo/public/assets/demo1_cropped/demo1_3.png
deleted file mode 100644
index 6b7f84f0d223c0355be23d878fe382d595ccd044..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e6fe8ef26af301020ca0896955e5a081eab66c254b720e84e47f30af7bbaf6bb
-size 449041
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_4.png b/screencoder/demo/public/assets/demo1_cropped/demo1_4.png
deleted file mode 100644
index dc7e816e31442380534b2e9471b94bec5327aa98..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0517915e1a1d16886b05d567a6a4e214af63af250a0876d630dbf72617092a05
-size 796274
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_5.png b/screencoder/demo/public/assets/demo1_cropped/demo1_5.png
deleted file mode 100644
index 8e907c0790179f29b42ddbbc3d12bd5f5a80f783..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_5.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6b87368bd35e254eff96e2abb2da9c3923fbeb5e7195830d641550e5fc735725
-size 653397
diff --git a/screencoder/demo/public/assets/demo1_cropped/demo1_6.png b/screencoder/demo/public/assets/demo1_cropped/demo1_6.png
deleted file mode 100644
index cf94b09e96d0962d07ca59766b74868fcbf18ca9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_cropped/demo1_6.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dd0c3ea3d5d0ffc33b62800a6dcb0e465c6cad4e729214c1b04b3be177f712d2
-size 198554
diff --git a/screencoder/demo/public/assets/demo1_output/ip/demo1.jpg b/screencoder/demo/public/assets/demo1_output/ip/demo1.jpg
deleted file mode 100644
index 7359303f974ac66b0ff8656f4f655bb91cf4ef48..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_output/ip/demo1.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a5b0b4d03c18c2c14bd55b11e0282c9da9a288bfc74b389d38e03e5eb6e0a892
-size 153857
diff --git a/screencoder/demo/public/assets/demo1_output/ip/demo1.json b/screencoder/demo/public/assets/demo1_output/ip/demo1.json
deleted file mode 100644
index b966f7e19836a7457dd2a132d58ead6730f6e31a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo1_output/ip/demo1.json
+++ /dev/null
@@ -1,969 +0,0 @@
-{
-    "img_shape": [
-        406,
-        799,
-        3
-    ],
-    "compos": [
-        {
-            "id": 1,
-            "class": "Compo",
-            "column_min": 262,
-            "row_min": 0,
-            "column_max": 511,
-            "row_max": 18,
-            "width": 249,
-            "height": 18
-        },
-        {
-            "id": 2,
-            "class": "Compo",
-            "column_min": 23,
-            "row_min": 5,
-            "column_max": 62,
-            "row_max": 13,
-            "width": 39,
-            "height": 8
-        },
-        {
-            "id": 3,
-            "class": "Compo",
-            "column_min": 64,
-            "row_min": 3,
-            "column_max": 70,
-            "row_max": 7,
-            "width": 6,
-            "height": 4
-        },
-        {
-            "id": 4,
-            "class": "Compo",
-            "column_min": 513,
-            "row_min": 0,
-            "column_max": 518,
-            "row_max": 17,
-            "width": 5,
-            "height": 17
-        },
-        {
-            "id": 5,
-            "class": "Compo",
-            "column_min": 525,
-            "row_min": 0,
-            "column_max": 542,
-            "row_max": 18,
-            "width": 17,
-            "height": 18
-        },
-        {
-            "id": 6,
-            "class": "Compo",
-            "column_min": 711,
-            "row_min": 0,
-            "column_max": 747,
-            "row_max": 17,
-            "width": 36,
-            "height": 17
-        },
-        {
-            "id": 7,
-            "class": "Compo",
-            "column_min": 755,
-            "row_min": 5,
-            "column_max": 763,
-            "row_max": 14,
-            "width": 8,
-            "height": 9
-        },
-        {
-            "id": 8,
-            "class": "Compo",
-            "column_min": 777,
-            "row_min": 2,
-            "column_max": 791,
-            "row_max": 16,
-            "width": 14,
-            "height": 14
-        },
-        {
-            "id": 9,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 6,
-            "column_max": 11,
-            "row_max": 12,
-            "width": 8,
-            "height": 6
-        },
-        {
-            "id": 10,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 30,
-            "column_max": 12,
-            "row_max": 39,
-            "width": 9,
-            "height": 9
-        },
-        {
-            "id": 11,
-            "class": "Compo",
-            "column_min": 60,
-            "row_min": 26,
-            "column_max": 83,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
-        },
-        {
-            "id": 12,
-            "class": "Compo",
-            "column_min": 87,
-            "row_min": 26,
-            "column_max": 110,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
-        },
-        {
-            "id": 13,
-            "class": "Compo",
-            "column_min": 142,
-            "row_min": 26,
-            "column_max": 164,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 14,
-            "class": "Compo",
-            "column_min": 170,
-            "row_min": 26,
-            "column_max": 192,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 15,
-            "class": "Compo",
-            "column_min": 224,
-            "row_min": 26,
-            "column_max": 247,
-            "row_max": 40,
-            "width": 23,
-            "height": 14
-        },
-        {
-            "id": 16,
-            "class": "Compo",
-            "column_min": 252,
-            "row_min": 26,
-            "column_max": 286,
-            "row_max": 40,
-            "width": 34,
-            "height": 14
-        },
-        {
-            "id": 17,
-            "class": "Compo",
-            "column_min": 33,
-            "row_min": 26,
-            "column_max": 55,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 18,
-            "class": "Compo",
-            "column_min": 115,
-            "row_min": 26,
-            "column_max": 137,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 19,
-            "class": "Compo",
-            "column_min": 197,
-            "row_min": 26,
-            "column_max": 219,
-            "row_max": 40,
-            "width": 22,
-            "height": 14
-        },
-        {
-            "id": 20,
-            "class": "Compo",
-            "column_min": 291,
-            "row_min": 26,
-            "column_max": 331,
-            "row_max": 40,
-            "width": 40,
-            "height": 14
-        },
-        {
-            "id": 21,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 43,
-            "column_max": 11,
-            "row_max": 48,
-            "width": 8,
-            "height": 5
-        },
-        {
-            "id": 22,
-            "class": "Compo",
-            "column_min": 33,
-            "row_min": 46,
-            "column_max": 282,
-            "row_max": 186,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 23,
-            "class": "Compo",
-            "column_min": 288,
-            "row_min": 46,
-            "column_max": 537,
-            "row_max": 186,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 24,
-            "class": "Compo",
-            "column_min": 544,
-            "row_min": 46,
-            "column_max": 793,
-            "row_max": 186,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 25,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 62,
-            "column_max": 11,
-            "row_max": 71,
-            "width": 8,
-            "height": 9
-        },
-        {
-            "id": 26,
-            "class": "Compo",
-            "column_min": 1,
-            "row_min": 75,
-            "column_max": 13,
-            "row_max": 79,
-            "width": 12,
-            "height": 4
-        },
-        {
-            "id": 27,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 94,
-            "column_max": 12,
-            "row_max": 101,
-            "width": 9,
-            "height": 7
-        },
-        {
-            "id": 28,
-            "class": "Compo",
-            "column_min": 4,
-            "row_min": 107,
-            "column_max": 11,
-            "row_max": 111,
-            "width": 7,
-            "height": 4
-        },
-        {
-            "id": 29,
-            "class": "Compo",
-            "column_min": 3,
-            "row_min": 125,
-            "column_max": 12,
-            "row_max": 134,
-            "width": 9,
-            "height": 9
-        },
-        {
-            "id": 30,
-            "class": "Compo",
-            "column_min": 33,
-            "row_min": 191,
-            "column_max": 48,
-            "row_max": 207,
-            "width": 15,
-            "height": 16
-        },
-        {
-            "id": 31,
-            "class": "Compo",
-            "column_min": 53,
-            "row_min": 193,
-            "column_max": 65,
-            "row_max": 199,
-            "width": 12,
-            "height": 6
-        },
-        {
-            "id": 32,
-            "class": "Compo",
-            "column_min": 67,
-            "row_min": 193,
-            "column_max": 78,
-            "row_max": 200,
-            "width": 11,
-            "height": 7
-        },
-        {
-            "id": 33,
-            "class": "Compo",
-            "column_min": 80,
-            "row_min": 193,
-            "column_max": 106,
-            "row_max": 200,
-            "width": 26,
-            "height": 7
-        },
-        {
-            "id": 34,
-            "class": "Compo",
-            "column_min": 108,
-            "row_min": 193,
-            "column_max": 129,
-            "row_max": 199,
-            "width": 21,
-            "height": 6
-        },
-        {
-            "id": 35,
-            "class": "Compo",
-            "column_min": 131,
-            "row_min": 193,
-            "column_max": 164,
-            "row_max": 200,
-            "width": 33,
-            "height": 7
-        },
-        {
-            "id": 36,
-            "class": "Compo",
-            "column_min": 288,
-            "row_min": 191,
-            "column_max": 304,
-            "row_max": 207,
-            "width": 16,
-            "height": 16
-        },
-        {
-            "id": 37,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 193,
-            "column_max": 339,
-            "row_max": 199,
-            "width": 30,
-            "height": 6
-        },
-        {
-            "id": 38,
-            "class": "Compo",
-            "column_min": 434,
-            "row_min": 193,
-            "column_max": 478,
-            "row_max": 199,
-            "width": 44,
-            "height": 6
-        },
-        {
-            "id": 39,
-            "class": "Compo",
-            "column_min": 480,
-            "row_min": 193,
-            "column_max": 508,
-            "row_max": 199,
-            "width": 28,
-            "height": 6
-        },
-        {
-            "id": 40,
-            "class": "Compo",
-            "column_min": 510,
-            "row_min": 194,
-            "column_max": 524,
-            "row_max": 199,
-            "width": 14,
-            "height": 5
-        },
-        {
-            "id": 41,
-            "class": "Compo",
-            "column_min": 544,
-            "row_min": 191,
-            "column_max": 560,
-            "row_max": 207,
-            "width": 16,
-            "height": 16
-        },
-        {
-            "id": 42,
-            "class": "Compo",
-            "column_min": 564,
-            "row_min": 193,
-            "column_max": 577,
-            "row_max": 198,
-            "width": 13,
-            "height": 5
-        },
-        {
-            "id": 43,
-            "class": "Compo",
-            "column_min": 580,
-            "row_min": 193,
-            "column_max": 598,
-            "row_max": 199,
-            "width": 18,
-            "height": 6
-        },
-        {
-            "id": 44,
-            "class": "Compo",
-            "column_min": 600,
-            "row_min": 193,
-            "column_max": 618,
-            "row_max": 199,
-            "width": 18,
-            "height": 6
-        },
-        {
-            "id": 45,
-            "class": "Compo",
-            "column_min": 620,
-            "row_min": 193,
-            "column_max": 647,
-            "row_max": 199,
-            "width": 27,
-            "height": 6
-        },
-        {
-            "id": 46,
-            "class": "Compo",
-            "column_min": 649,
-            "row_min": 193,
-            "column_max": 656,
-            "row_max": 199,
-            "width": 7,
-            "height": 6
-        },
-        {
-            "id": 47,
-            "class": "Compo",
-            "column_min": 658,
-            "row_min": 193,
-            "column_max": 672,
-            "row_max": 199,
-            "width": 14,
-            "height": 6
-        },
-        {
-            "id": 48,
-            "class": "Compo",
-            "column_min": 678,
-            "row_min": 192,
-            "column_max": 739,
-            "row_max": 199,
-            "width": 61,
-            "height": 7
-        },
-        {
-            "id": 49,
-            "class": "Compo",
-            "column_min": 741,
-            "row_min": 192,
-            "column_max": 779,
-            "row_max": 200,
-            "width": 38,
-            "height": 8
-        },
-        {
-            "id": 50,
-            "class": "Compo",
-            "column_min": 53,
-            "row_min": 204,
-            "column_max": 94,
-            "row_max": 209,
-            "width": 41,
-            "height": 5
-        },
-        {
-            "id": 51,
-            "class": "Compo",
-            "column_min": 96,
-            "row_min": 204,
-            "column_max": 102,
-            "row_max": 209,
-            "width": 6,
-            "height": 5
-        },
-        {
-            "id": 52,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 202,
-            "column_max": 348,
-            "row_max": 209,
-            "width": 39,
-            "height": 7
-        },
-        {
-            "id": 53,
-            "class": "Compo",
-            "column_min": 565,
-            "row_min": 204,
-            "column_max": 585,
-            "row_max": 209,
-            "width": 20,
-            "height": 5
-        },
-        {
-            "id": 54,
-            "class": "Compo",
-            "column_min": 54,
-            "row_min": 212,
-            "column_max": 84,
-            "row_max": 218,
-            "width": 30,
-            "height": 6
-        },
-        {
-            "id": 55,
-            "class": "Compo",
-            "column_min": 90,
-            "row_min": 212,
-            "column_max": 114,
-            "row_max": 218,
-            "width": 24,
-            "height": 6
-        },
-        {
-            "id": 56,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 214,
-            "column_max": 355,
-            "row_max": 219,
-            "width": 46,
-            "height": 5
-        },
-        {
-            "id": 57,
-            "class": "Compo",
-            "column_min": 357,
-            "row_min": 213,
-            "column_max": 392,
-            "row_max": 219,
-            "width": 35,
-            "height": 6
-        },
-        {
-            "id": 58,
-            "class": "Compo",
-            "column_min": 565,
-            "row_min": 212,
-            "column_max": 597,
-            "row_max": 218,
-            "width": 32,
-            "height": 6
-        },
-        {
-            "id": 59,
-            "class": "Compo",
-            "column_min": 603,
-            "row_min": 212,
-            "column_max": 624,
-            "row_max": 218,
-            "width": 21,
-            "height": 6
-        },
-        {
-            "id": 60,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 222,
-            "column_max": 333,
-            "row_max": 228,
-            "width": 24,
-            "height": 6
-        },
-        {
-            "id": 61,
-            "class": "Compo",
-            "column_min": 339,
-            "row_min": 222,
-            "column_max": 349,
-            "row_max": 228,
-            "width": 10,
-            "height": 6
-        },
-        {
-            "id": 62,
-            "class": "Compo",
-            "column_min": 350,
-            "row_min": 222,
-            "column_max": 364,
-            "row_max": 228,
-            "width": 14,
-            "height": 6
-        },
-        {
-            "id": 63,
-            "class": "Compo",
-            "column_min": 33,
-            "row_min": 243,
-            "column_max": 282,
-            "row_max": 383,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 64,
-            "class": "Compo",
-            "column_min": 288,
-            "row_min": 243,
-            "column_max": 537,
-            "row_max": 383,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 65,
-            "class": "Block",
-            "column_min": 544,
-            "row_min": 243,
-            "column_max": 793,
-            "row_max": 383,
-            "width": 249,
-            "height": 140
-        },
-        {
-            "id": 66,
-            "class": "Compo",
-            "column_min": 609,
-            "row_min": 254,
-            "column_max": 728,
-            "row_max": 373,
-            "width": 119,
-            "height": 119
-        },
-        {
-            "id": 67,
-            "class": "Compo",
-            "column_min": 775,
-            "row_min": 373,
-            "column_max": 788,
-            "row_max": 377,
-            "width": 13,
-            "height": 4
-        },
-        {
-            "id": 68,
-            "class": "Compo",
-            "column_min": 33,
-            "row_min": 388,
-            "column_max": 48,
-            "row_max": 403,
-            "width": 15,
-            "height": 15
-        },
-        {
-            "id": 69,
-            "class": "Compo",
-            "column_min": 54,
-            "row_min": 390,
-            "column_max": 88,
-            "row_max": 395,
-            "width": 34,
-            "height": 5
-        },
-        {
-            "id": 70,
-            "class": "Compo",
-            "column_min": 90,
-            "row_min": 389,
-            "column_max": 120,
-            "row_max": 396,
-            "width": 30,
-            "height": 7
-        },
-        {
-            "id": 71,
-            "class": "Compo",
-            "column_min": 124,
-            "row_min": 389,
-            "column_max": 165,
-            "row_max": 396,
-            "width": 41,
-            "height": 7
-        },
-        {
-            "id": 72,
-            "class": "Compo",
-            "column_min": 288,
-            "row_min": 388,
-            "column_max": 304,
-            "row_max": 403,
-            "width": 16,
-            "height": 15
-        },
-        {
-            "id": 73,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 390,
-            "column_max": 342,
-            "row_max": 396,
-            "width": 33,
-            "height": 6
-        },
-        {
-            "id": 74,
-            "class": "Compo",
-            "column_min": 344,
-            "row_min": 390,
-            "column_max": 371,
-            "row_max": 396,
-            "width": 27,
-            "height": 6
-        },
-        {
-            "id": 75,
-            "class": "Compo",
-            "column_min": 373,
-            "row_min": 390,
-            "column_max": 377,
-            "row_max": 395,
-            "width": 4,
-            "height": 5
-        },
-        {
-            "id": 76,
-            "class": "Compo",
-            "column_min": 391,
-            "row_min": 390,
-            "column_max": 417,
-            "row_max": 395,
-            "width": 26,
-            "height": 5
-        },
-        {
-            "id": 77,
-            "class": "Compo",
-            "column_min": 419,
-            "row_min": 390,
-            "column_max": 450,
-            "row_max": 397,
-            "width": 31,
-            "height": 7
-        },
-        {
-            "id": 78,
-            "class": "Compo",
-            "column_min": 452,
-            "row_min": 390,
-            "column_max": 484,
-            "row_max": 395,
-            "width": 32,
-            "height": 5
-        },
-        {
-            "id": 79,
-            "class": "Compo",
-            "column_min": 486,
-            "row_min": 390,
-            "column_max": 492,
-            "row_max": 395,
-            "width": 6,
-            "height": 5
-        },
-        {
-            "id": 80,
-            "class": "Compo",
-            "column_min": 494,
-            "row_min": 390,
-            "column_max": 520,
-            "row_max": 397,
-            "width": 26,
-            "height": 7
-        },
-        {
-            "id": 81,
-            "class": "Compo",
-            "column_min": 544,
-            "row_min": 388,
-            "column_max": 560,
-            "row_max": 403,
-            "width": 16,
-            "height": 15
-        },
-        {
-            "id": 82,
-            "class": "Compo",
-            "column_min": 565,
-            "row_min": 390,
-            "column_max": 575,
-            "row_max": 395,
-            "width": 10,
-            "height": 5
-        },
-        {
-            "id": 83,
-            "class": "Compo",
-            "column_min": 577,
-            "row_min": 390,
-            "column_max": 598,
-            "row_max": 395,
-            "width": 21,
-            "height": 5
-        },
-        {
-            "id": 84,
-            "class": "Compo",
-            "column_min": 629,
-            "row_min": 390,
-            "column_max": 665,
-            "row_max": 396,
-            "width": 36,
-            "height": 6
-        },
-        {
-            "id": 85,
-            "class": "Compo",
-            "column_min": 667,
-            "row_min": 389,
-            "column_max": 728,
-            "row_max": 396,
-            "width": 61,
-            "height": 7
-        },
-        {
-            "id": 86,
-            "class": "Compo",
-            "column_min": 379,
-            "row_min": 390,
-            "column_max": 389,
-            "row_max": 395,
-            "width": 10,
-            "height": 5
-        },
-        {
-            "id": 87,
-            "class": "Compo",
-            "column_min": 600,
-            "row_min": 390,
-            "column_max": 627,
-            "row_max": 396,
-            "width": 27,
-            "height": 6
-        },
-        {
-            "id": 88,
-            "class": "Compo",
-            "column_min": 85,
-            "row_min": 400,
-            "column_max": 95,
-            "row_max": 405,
-            "width": 10,
-            "height": 5
-        },
-        {
-            "id": 89,
-            "class": "Compo",
-            "column_min": 97,
-            "row_min": 400,
-            "column_max": 114,
-            "row_max": 405,
-            "width": 17,
-            "height": 5
-        },
-        {
-            "id": 90,
-            "class": "Compo",
-            "column_min": 309,
-            "row_min": 400,
-            "column_max": 349,
-            "row_max": 405,
-            "width": 40,
-            "height": 5
-        },
-        {
-            "id": 91,
-            "class": "Compo",
-            "column_min": 565,
-            "row_min": 400,
-            "column_max": 600,
-            "row_max": 405,
-            "width": 35,
-            "height": 5
-        },
-        {
-            "id": 92,
-            "class": "Compo",
-            "column_min": 53,
-            "row_min": 400,
-            "column_max": 80,
-            "row_max": 405,
-            "width": 27,
-            "height": 5
-        },
-        {
-            "id": 93,
-            "class": "Compo",
-            "column_min": 602,
-            "row_min": 400,
-            "column_max": 607,
-            "row_max": 405,
-            "width": 5,
-            "height": 5
-        },
-        {
-            "id": 94,
-            "class": "Compo",
-            "column_min": 731,
-            "row_min": 54,
-            "column_max": 790,
-            "row_max": 111,
-            "width": 59,
-            "height": 57
-        },
-        {
-            "id": 95,
-            "class": "Compo",
-            "column_min": 625,
-            "row_min": 269,
-            "column_max": 713,
-            "row_max": 357,
-            "width": 88,
-            "height": 88
-        },
-        {
-            "id": 96,
-            "class": "Compo",
-            "column_min": 625,
-            "row_min": 269,
-            "column_max": 713,
-            "row_max": 357,
-            "width": 88,
-            "height": 88
-        }
-    ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/demo2.png b/screencoder/demo/public/assets/demo2.png
deleted file mode 100644
index 75e0828ed50d84eecd5c48b6bcd64ae53bb53f87..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dd5da753710271efb0dd9b2a237dd5c8ed526e3e0fb67a2a258628705986f1c9
-size 3783330
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo2_1.png b/screencoder/demo/public/assets/demo2_cropped/demo2_1.png
deleted file mode 100644
index 803cfb8b8b1ceded0e5fe0fb1d93bdf240bb865a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo2_1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9053eb0df2405d7bc959b463f49775086bff62fdba3d07c873bbdc69b9467b03
-size 869325
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo2_2.png b/screencoder/demo/public/assets/demo2_cropped/demo2_2.png
deleted file mode 100644
index c358daca27705e6e47870c7c6d3528913ef2aea3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo2_2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1c6a80f4dd1751f16533973a248b8b0b979d36e8b7faa120fee5d73a90504cb4
-size 811335
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo2_3.png b/screencoder/demo/public/assets/demo2_cropped/demo2_3.png
deleted file mode 100644
index e6af968cd01e7bb4633ae2d7af7e21b1ae2af945..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo2_3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:69cad1acde2462573dd411092907d463f485d02439674a0b93d68a557edbdb33
-size 961194
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_10.png b/screencoder/demo/public/assets/demo2_cropped/demo3_10.png
deleted file mode 100644
index 4a55849c52b73d771b1cb430d69ead44c1b99f63..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_10.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aba031e1e1c178ae0094cdb739438d4b828d7d0d7147e85d09e996520cf4f226
-size 47175
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_11.png b/screencoder/demo/public/assets/demo2_cropped/demo3_11.png
deleted file mode 100644
index ce6ed69da4c3927217b92a1f16ade8ae060b19ae..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_11.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:43ba8d5a3c24cb0a4a4146bc124f48ad253285925b23cbc47f2edcd14aa97df6
-size 54383
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_4.png b/screencoder/demo/public/assets/demo2_cropped/demo3_4.png
deleted file mode 100644
index e2ce478bc0831c427c4c209bc86c676afd500543..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7c6e2033357af10dfa5ea64db5f865ead75535b2302f30845b051ecaa1235485
-size 155318
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_5.png b/screencoder/demo/public/assets/demo2_cropped/demo3_5.png
deleted file mode 100644
index 21ae6915d62d63f8e5c3af7384d36d189f3b5a34..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_5.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3d3c397d267137d2506842c51129db5d4e60bf0f17430cc968fa3ba55c323acf
-size 47940
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_6.png b/screencoder/demo/public/assets/demo2_cropped/demo3_6.png
deleted file mode 100644
index 81da74f237bdd101e40bf7d96786809d860bd8c7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_6.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:55cf5008ce18d29b11e346d7cb955522704d6b649c5aa4df3e45013d92df165d
-size 51479
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_7.png b/screencoder/demo/public/assets/demo2_cropped/demo3_7.png
deleted file mode 100644
index 478f00b5dd2d0d4fc62ff4763f79eb119b39ebb4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_7.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9f4e5de201663efdf21283bf49ae9d0f0a90ff484a38046e225edb8db152aa6c
-size 54787
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_8.png b/screencoder/demo/public/assets/demo2_cropped/demo3_8.png
deleted file mode 100644
index b3d0c4af2c7eb2e816f6906b471a70dbae47e264..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_8.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1bbf503595e24f898d59b1017d8098b1c75e41ca4ed141f3eb46fb3b15cfd1b0
-size 53470
diff --git a/screencoder/demo/public/assets/demo2_cropped/demo3_9.png b/screencoder/demo/public/assets/demo2_cropped/demo3_9.png
deleted file mode 100644
index 18167ece5b5b406a14d9da9d9ea2e22380da1866..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_cropped/demo3_9.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cff3919c0712ae3b0cfdd7cea3fa76f55abcb04111a41a4709a288bef96c4e2b
-size 21336
diff --git a/screencoder/demo/public/assets/demo2_output/ip/demo2.jpg b/screencoder/demo/public/assets/demo2_output/ip/demo2.jpg
deleted file mode 100644
index ebae59de9a9abbfbee7c2a9010afd70a10bc4e11..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_output/ip/demo2.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:94990f952582c20993f897cd5aa18dac40b8a7ea1eb59df4c707deac22755178
-size 130732
diff --git a/screencoder/demo/public/assets/demo2_output/ip/demo2.json b/screencoder/demo/public/assets/demo2_output/ip/demo2.json
deleted file mode 100644
index 8352a43cdcb2a1b5b7dbea1fc2f57679df033bbb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo2_output/ip/demo2.json
+++ /dev/null
@@ -1,629 +0,0 @@
-{
-    "img_shape": [
-        474,
-        798,
-        3
-    ],
-    "compos": [
-        {
-            "id": 1,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 19,
-            "column_max": 59,
-            "row_max": 34,
-            "width": 52,
-            "height": 15
-        },
-        {
-            "id": 2,
-            "class": "Compo",
-            "column_min": 534,
-            "row_min": 17,
-            "column_max": 570,
-            "row_max": 34,
-            "width": 36,
-            "height": 17
-        },
-        {
-            "id": 3,
-            "class": "Compo",
-            "column_min": 574,
-            "row_min": 17,
-            "column_max": 611,
-            "row_max": 34,
-            "width": 37,
-            "height": 17
-        },
-        {
-            "id": 4,
-            "class": "Compo",
-            "column_min": 615,
-            "row_min": 17,
-            "column_max": 632,
-            "row_max": 34,
-            "width": 17,
-            "height": 17
-        },
-        {
-            "id": 5,
-            "class": "Compo",
-            "column_min": 457,
-            "row_min": 22,
-            "column_max": 511,
-            "row_max": 30,
-            "width": 54,
-            "height": 8
-        },
-        {
-            "id": 6,
-            "class": "Compo",
-            "column_min": 515,
-            "row_min": 22,
-            "column_max": 525,
-            "row_max": 31,
-            "width": 10,
-            "height": 9
-        },
-        {
-            "id": 7,
-            "class": "Compo",
-            "column_min": 329,
-            "row_min": 29,
-            "column_max": 413,
-            "row_max": 113,
-            "width": 84,
-            "height": 84
-        },
-        {
-            "id": 8,
-            "class": "Compo",
-            "column_min": 456,
-            "row_min": 49,
-            "column_max": 495,
-            "row_max": 57,
-            "width": 39,
-            "height": 8
-        },
-        {
-            "id": 9,
-            "class": "Compo",
-            "column_min": 515,
-            "row_min": 49,
-            "column_max": 561,
-            "row_max": 57,
-            "width": 46,
-            "height": 8
-        },
-        {
-            "id": 10,
-            "class": "Compo",
-            "column_min": 581,
-            "row_min": 49,
-            "column_max": 619,
-            "row_max": 57,
-            "width": 38,
-            "height": 8
-        },
-        {
-            "id": 11,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 57,
-            "column_max": 19,
-            "row_max": 69,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 12,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 59,
-            "column_max": 44,
-            "row_max": 67,
-            "width": 17,
-            "height": 8
-        },
-        {
-            "id": 13,
-            "class": "Compo",
-            "column_min": 457,
-            "row_min": 69,
-            "column_max": 485,
-            "row_max": 75,
-            "width": 28,
-            "height": 6
-        },
-        {
-            "id": 14,
-            "class": "Compo",
-            "column_min": 488,
-            "row_min": 69,
-            "column_max": 503,
-            "row_max": 75,
-            "width": 15,
-            "height": 6
-        },
-        {
-            "id": 15,
-            "class": "Compo",
-            "column_min": 456,
-            "row_min": 80,
-            "column_max": 509,
-            "row_max": 93,
-            "width": 53,
-            "height": 13
-        },
-        {
-            "id": 16,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 85,
-            "column_max": 19,
-            "row_max": 97,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 17,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 87,
-            "column_max": 44,
-            "row_max": 96,
-            "width": 17,
-            "height": 9
-        },
-        {
-            "id": 18,
-            "class": "Compo",
-            "column_min": 456,
-            "row_min": 97,
-            "column_max": 571,
-            "row_max": 114,
-            "width": 115,
-            "height": 17
-        },
-        {
-            "id": 19,
-            "class": "Compo",
-            "column_min": 574,
-            "row_min": 97,
-            "column_max": 581,
-            "row_max": 104,
-            "width": 7,
-            "height": 7
-        },
-        {
-            "id": 20,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 113,
-            "column_max": 19,
-            "row_max": 125,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 21,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 115,
-            "column_max": 44,
-            "row_max": 124,
-            "width": 17,
-            "height": 9
-        },
-        {
-            "id": 22,
-            "class": "Compo",
-            "column_min": 456,
-            "row_min": 122,
-            "column_max": 502,
-            "row_max": 129,
-            "width": 46,
-            "height": 7
-        },
-        {
-            "id": 23,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 141,
-            "column_max": 19,
-            "row_max": 153,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 24,
-            "class": "Compo",
-            "column_min": 28,
-            "row_min": 145,
-            "column_max": 48,
-            "row_max": 152,
-            "width": 20,
-            "height": 7
-        },
-        {
-            "id": 25,
-            "class": "Compo",
-            "column_min": 321,
-            "row_min": 154,
-            "column_max": 365,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 26,
-            "class": "Compo",
-            "column_min": 387,
-            "row_min": 154,
-            "column_max": 431,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 27,
-            "class": "Compo",
-            "column_min": 454,
-            "row_min": 154,
-            "column_max": 498,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 28,
-            "class": "Compo",
-            "column_min": 520,
-            "row_min": 154,
-            "column_max": 564,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 29,
-            "class": "Compo",
-            "column_min": 587,
-            "row_min": 154,
-            "column_max": 631,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 30,
-            "class": "Compo",
-            "column_min": 653,
-            "row_min": 154,
-            "column_max": 697,
-            "row_max": 197,
-            "width": 44,
-            "height": 43
-        },
-        {
-            "id": 31,
-            "class": "Compo",
-            "column_min": 720,
-            "row_min": 154,
-            "column_max": 766,
-            "row_max": 197,
-            "width": 46,
-            "height": 43
-        },
-        {
-            "id": 32,
-            "class": "Compo",
-            "column_min": 8,
-            "row_min": 170,
-            "column_max": 19,
-            "row_max": 181,
-            "width": 11,
-            "height": 11
-        },
-        {
-            "id": 33,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 172,
-            "column_max": 44,
-            "row_max": 180,
-            "width": 17,
-            "height": 8
-        },
-        {
-            "id": 34,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 197,
-            "column_max": 21,
-            "row_max": 209,
-            "width": 14,
-            "height": 12
-        },
-        {
-            "id": 35,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 200,
-            "column_max": 44,
-            "row_max": 208,
-            "width": 17,
-            "height": 8
-        },
-        {
-            "id": 36,
-            "class": "Compo",
-            "column_min": 325,
-            "row_min": 204,
-            "column_max": 343,
-            "row_max": 209,
-            "width": 18,
-            "height": 5
-        },
-        {
-            "id": 37,
-            "class": "Compo",
-            "column_min": 345,
-            "row_min": 204,
-            "column_max": 361,
-            "row_max": 209,
-            "width": 16,
-            "height": 5
-        },
-        {
-            "id": 38,
-            "class": "Compo",
-            "column_min": 388,
-            "row_min": 204,
-            "column_max": 406,
-            "row_max": 209,
-            "width": 18,
-            "height": 5
-        },
-        {
-            "id": 39,
-            "class": "Compo",
-            "column_min": 408,
-            "row_min": 204,
-            "column_max": 429,
-            "row_max": 210,
-            "width": 21,
-            "height": 6
-        },
-        {
-            "id": 40,
-            "class": "Compo",
-            "column_min": 465,
-            "row_min": 204,
-            "column_max": 486,
-            "row_max": 209,
-            "width": 21,
-            "height": 5
-        },
-        {
-            "id": 41,
-            "class": "Compo",
-            "column_min": 527,
-            "row_min": 204,
-            "column_max": 537,
-            "row_max": 209,
-            "width": 10,
-            "height": 5
-        },
-        {
-            "id": 42,
-            "class": "Compo",
-            "column_min": 539,
-            "row_min": 204,
-            "column_max": 558,
-            "row_max": 209,
-            "width": 19,
-            "height": 5
-        },
-        {
-            "id": 43,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 204,
-            "column_max": 623,
-            "row_max": 209,
-            "width": 29,
-            "height": 5
-        },
-        {
-            "id": 44,
-            "class": "Compo",
-            "column_min": 661,
-            "row_min": 204,
-            "column_max": 689,
-            "row_max": 209,
-            "width": 28,
-            "height": 5
-        },
-        {
-            "id": 45,
-            "class": "Compo",
-            "column_min": 720,
-            "row_min": 204,
-            "column_max": 748,
-            "row_max": 209,
-            "width": 28,
-            "height": 5
-        },
-        {
-            "id": 46,
-            "class": "Compo",
-            "column_min": 750,
-            "row_min": 204,
-            "column_max": 762,
-            "row_max": 209,
-            "width": 12,
-            "height": 5
-        },
-        {
-            "id": 47,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 226,
-            "column_max": 19,
-            "row_max": 238,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 48,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 228,
-            "column_max": 44,
-            "row_max": 237,
-            "width": 17,
-            "height": 9
-        },
-        {
-            "id": 49,
-            "class": "Compo",
-            "column_min": 461,
-            "row_min": 249,
-            "column_max": 466,
-            "row_max": 254,
-            "width": 5,
-            "height": 5
-        },
-        {
-            "id": 50,
-            "class": "Compo",
-            "column_min": 470,
-            "row_min": 249,
-            "column_max": 482,
-            "row_max": 255,
-            "width": 12,
-            "height": 6
-        },
-        {
-            "id": 51,
-            "class": "Compo",
-            "column_min": 513,
-            "row_min": 249,
-            "column_max": 519,
-            "row_max": 255,
-            "width": 6,
-            "height": 6
-        },
-        {
-            "id": 52,
-            "class": "Compo",
-            "column_min": 522,
-            "row_min": 249,
-            "column_max": 543,
-            "row_max": 254,
-            "width": 21,
-            "height": 5
-        },
-        {
-            "id": 53,
-            "class": "Compo",
-            "column_min": 574,
-            "row_min": 249,
-            "column_max": 580,
-            "row_max": 255,
-            "width": 6,
-            "height": 6
-        },
-        {
-            "id": 54,
-            "class": "Compo",
-            "column_min": 582,
-            "row_min": 249,
-            "column_max": 608,
-            "row_max": 255,
-            "width": 26,
-            "height": 6
-        },
-        {
-            "id": 55,
-            "class": "Compo",
-            "column_min": 7,
-            "row_min": 254,
-            "column_max": 19,
-            "row_max": 266,
-            "width": 12,
-            "height": 12
-        },
-        {
-            "id": 56,
-            "class": "Compo",
-            "column_min": 28,
-            "row_min": 256,
-            "column_max": 44,
-            "row_max": 265,
-            "width": 16,
-            "height": 9
-        },
-        {
-            "id": 57,
-            "class": "Compo",
-            "column_min": 298,
-            "row_min": 265,
-            "column_max": 454,
-            "row_max": 473,
-            "width": 156,
-            "height": 208
-        },
-        {
-            "id": 58,
-            "class": "Compo",
-            "column_min": 456,
-            "row_min": 265,
-            "column_max": 611,
-            "row_max": 473,
-            "width": 155,
-            "height": 208
-        },
-        {
-            "id": 59,
-            "class": "Compo",
-            "column_min": 613,
-            "row_min": 265,
-            "column_max": 768,
-            "row_max": 473,
-            "width": 155,
-            "height": 208
-        },
-        {
-            "id": 60,
-            "class": "Compo",
-            "column_min": 8,
-            "row_min": 422,
-            "column_max": 18,
-            "row_max": 434,
-            "width": 10,
-            "height": 12
-        },
-        {
-            "id": 61,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 425,
-            "column_max": 59,
-            "row_max": 432,
-            "width": 32,
-            "height": 7
-        },
-        {
-            "id": 62,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 453,
-            "column_max": 44,
-            "row_max": 461,
-            "width": 17,
-            "height": 8
-        }
-    ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/assets/demo3.png b/screencoder/demo/public/assets/demo3.png
deleted file mode 100644
index fd8809e452b11a8dd11983f0089c7437fa23861f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f5359e2b2308a8c2657bc42d54dced8098c37c17a092764bb800142bef4f0f05
-size 1499243
diff --git a/screencoder/demo/public/assets/demo3_cropped/demo3_1.png b/screencoder/demo/public/assets/demo3_cropped/demo3_1.png
deleted file mode 100644
index dabe0dcfa0a1f75713473fa622a2ad80b7e990cb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3_cropped/demo3_1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:2d15af24d0ec0324694eb6c84a8353d7ac0040fe7ed3dfcbd07e591e04f18c57
-size 296820
diff --git a/screencoder/demo/public/assets/demo3_cropped/demo3_2.png b/screencoder/demo/public/assets/demo3_cropped/demo3_2.png
deleted file mode 100644
index a94299526251ba9baf03cc630be029aed0f53d88..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3_cropped/demo3_2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:2ed00440e21784da53048aeb794da21c19c1b619ff566691717c7043fe4c296e
-size 3726052
diff --git a/screencoder/demo/public/assets/demo3_cropped/demo3_3.png b/screencoder/demo/public/assets/demo3_cropped/demo3_3.png
deleted file mode 100644
index 41bb5f4db02b8505977f919fc4a507302812ac14..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3_cropped/demo3_3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4cf49b20391f8f96481ce3c668b98db8406535009109a41085ead8b02853e02f
-size 205626
diff --git a/screencoder/demo/public/assets/demo3_cropped/demo3_4.png b/screencoder/demo/public/assets/demo3_cropped/demo3_4.png
deleted file mode 100644
index d1784d8e02b5c53cad61c3ff30a69f3b63998b79..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3_cropped/demo3_4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:52dd9c326e8bfd9e677f88e436626327b6806424838c397181b45079226e0211
-size 17634
diff --git a/screencoder/demo/public/assets/demo3_cropped/demo3_5.png b/screencoder/demo/public/assets/demo3_cropped/demo3_5.png
deleted file mode 100644
index e6b75db4a769703030bc8cdb18df987707e3ccb7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo3_cropped/demo3_5.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:19e55a8d47ce62b41a8c11344bb568046f1e08ca6063af74e1b2c85d98da224b
-size 1333398
diff --git a/screencoder/demo/public/assets/demo4.png b/screencoder/demo/public/assets/demo4.png
deleted file mode 100644
index 48326d964c2d2f47cf449a317a351ad77796b969..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:71392f5f39ad6e240963274f112cc34ba0363209587ac9d605b03ee9115c0722
-size 1902723
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_1.png b/screencoder/demo/public/assets/demo4_cropped/demo4_1.png
deleted file mode 100644
index 3858d201936e07bdac85407e2002e0c595e83f77..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_1.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a70a4ff331f5940127a425945eaa6f5fd758af1746d00f17cb11527e24d38445
-size 389175
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_10.png b/screencoder/demo/public/assets/demo4_cropped/demo4_10.png
deleted file mode 100644
index 10d5531e2c9833b25bcc6f87d879ef8363dc6fa7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_10.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6e1805df58048be98c1d1d09407f8abb796269e8d8e292483a7bac45c6b0a66e
-size 80628
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_11.png b/screencoder/demo/public/assets/demo4_cropped/demo4_11.png
deleted file mode 100644
index f7df24c74464a38713fbb15fef66a09f60fe8009..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_11.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:39d735161906d5f3871c28cbc8a525795ceaa0e7680d842f0e87cce7dbc7923b
-size 53963
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_12.png b/screencoder/demo/public/assets/demo4_cropped/demo4_12.png
deleted file mode 100644
index 53ad61db7f681e89353298543d155d89c6e7d140..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_12.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:481156c4417175762b6b4a3dfcccdedc6307c9c893769c5374f0df40932d04ff
-size 48989
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_2.png b/screencoder/demo/public/assets/demo4_cropped/demo4_2.png
deleted file mode 100644
index 66a8d2b9e0148930d9d3a062dc70588074527060..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_2.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:61dcc15bbfcfefc015b1be62e331feed2cfdbae85b86d6b512170debc51e7983
-size 50704
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_3.png b/screencoder/demo/public/assets/demo4_cropped/demo4_3.png
deleted file mode 100644
index b61ec0987fdbf256afcaeafa3c1b51e8723be1d2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_3.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:795b6c6ae4ea43513108a691660645c29b80fc0655489aae7c631d1b8ec40904
-size 92322
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_4.png b/screencoder/demo/public/assets/demo4_cropped/demo4_4.png
deleted file mode 100644
index 85711af8c6e3d88bce8df10f43e659639aacf479..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_4.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e0929a61079beb3e3a9a9ba3dc8a3a0271fdfdd53e0b6eb9888feec98f9191d9
-size 89364
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_5.png b/screencoder/demo/public/assets/demo4_cropped/demo4_5.png
deleted file mode 100644
index 1800d06c21b4dd610e3f82992a691bb9361c95e4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_5.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:63ff196c5a9bd5df1305bfa46dd4434158b43c57a0a8b205da039e3f54e7e5bd
-size 83900
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_6.png b/screencoder/demo/public/assets/demo4_cropped/demo4_6.png
deleted file mode 100644
index 40909fa456120c1b7e8a95e843beafd3984bacf3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_6.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d9981cc7a5205542352cac9c946500e6226bfb5bb18ef04f651a59fcf580ddd4
-size 6657
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_7.png b/screencoder/demo/public/assets/demo4_cropped/demo4_7.png
deleted file mode 100644
index 1e4690b9d1be5e77538958518515ff776564dbbb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_7.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9d8a9f579acf47e4bfad4fe1be711d057f3d854f265428ff47eab168e1f62f3d
-size 14170
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_8.png b/screencoder/demo/public/assets/demo4_cropped/demo4_8.png
deleted file mode 100644
index 548128c315287c57e62694b6b91c3d935f45635c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_8.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0709760b2cac038f3457b3d82bdc5ae835cc4f96e783b5151033a1d2a5de9de5
-size 35571
diff --git a/screencoder/demo/public/assets/demo4_cropped/demo4_9.png b/screencoder/demo/public/assets/demo4_cropped/demo4_9.png
deleted file mode 100644
index 76af08c071545db70a128869662c705b234a5c8b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_cropped/demo4_9.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a7e504e241474c8debd3def120f89546d10b278986391528765115ba4eabee25
-size 35962
diff --git a/screencoder/demo/public/assets/demo4_output/ip/demo4.jpg b/screencoder/demo/public/assets/demo4_output/ip/demo4.jpg
deleted file mode 100644
index faaac32025594f04f8c5e814d99751454a143426..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_output/ip/demo4.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d0360e6cc4f5cfaae98170b2eab0537f7fec011e829c69fc11b2fb9d63b79e23
-size 153209
diff --git a/screencoder/demo/public/assets/demo4_output/ip/demo4.json b/screencoder/demo/public/assets/demo4_output/ip/demo4.json
deleted file mode 100644
index c869d8bb64d33e76a99e45da1be81319cb047a96..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/assets/demo4_output/ip/demo4.json
+++ /dev/null
@@ -1,649 +0,0 @@
-{
-    "img_shape": [
-        473,
-        799,
-        3
-    ],
-    "compos": [
-        {
-            "id": 1,
-            "class": "Compo",
-            "column_min": 701,
-            "row_min": 5,
-            "column_max": 769,
-            "row_max": 39,
-            "width": 68,
-            "height": 34
-        },
-        {
-            "id": 2,
-            "class": "Compo",
-            "column_min": 424,
-            "row_min": 8,
-            "column_max": 437,
-            "row_max": 22,
-            "width": 13,
-            "height": 14
-        },
-        {
-            "id": 3,
-            "class": "Compo",
-            "column_min": 531,
-            "row_min": 9,
-            "column_max": 545,
-            "row_max": 21,
-            "width": 14,
-            "height": 12
-        },
-        {
-            "id": 4,
-            "class": "Compo",
-            "column_min": 585,
-            "row_min": 9,
-            "column_max": 598,
-            "row_max": 23,
-            "width": 13,
-            "height": 14
-        },
-        {
-            "id": 5,
-            "class": "Compo",
-            "column_min": 63,
-            "row_min": 13,
-            "column_max": 80,
-            "row_max": 31,
-            "width": 17,
-            "height": 18
-        },
-        {
-            "id": 6,
-            "class": "Compo",
-            "column_min": 370,
-            "row_min": 11,
-            "column_max": 383,
-            "row_max": 24,
-            "width": 13,
-            "height": 13
-        },
-        {
-            "id": 7,
-            "class": "Compo",
-            "column_min": 476,
-            "row_min": 11,
-            "column_max": 492,
-            "row_max": 23,
-            "width": 16,
-            "height": 12
-        },
-        {
-            "id": 8,
-            "class": "Compo",
-            "column_min": 11,
-            "row_min": 15,
-            "column_max": 61,
-            "row_max": 28,
-            "width": 50,
-            "height": 13
-        },
-        {
-            "id": 9,
-            "class": "Compo",
-            "column_min": 635,
-            "row_min": 18,
-            "column_max": 656,
-            "row_max": 27,
-            "width": 21,
-            "height": 9
-        },
-        {
-            "id": 10,
-            "class": "Compo",
-            "column_min": 659,
-            "row_min": 20,
-            "column_max": 680,
-            "row_max": 27,
-            "width": 21,
-            "height": 7
-        },
-        {
-            "id": 11,
-            "class": "Compo",
-            "column_min": 353,
-            "row_min": 27,
-            "column_max": 367,
-            "row_max": 35,
-            "width": 14,
-            "height": 8
-        },
-        {
-            "id": 12,
-            "class": "Compo",
-            "column_min": 370,
-            "row_min": 27,
-            "column_max": 400,
-            "row_max": 34,
-            "width": 30,
-            "height": 7
-        },
-        {
-            "id": 13,
-            "class": "Compo",
-            "column_min": 418,
-            "row_min": 26,
-            "column_max": 443,
-            "row_max": 34,
-            "width": 25,
-            "height": 8
-        },
-        {
-            "id": 14,
-            "class": "Compo",
-            "column_min": 468,
-            "row_min": 27,
-            "column_max": 500,
-            "row_max": 35,
-            "width": 32,
-            "height": 8
-        },
-        {
-            "id": 15,
-            "class": "Compo",
-            "column_min": 529,
-            "row_min": 27,
-            "column_max": 547,
-            "row_max": 34,
-            "width": 18,
-            "height": 7
-        },
-        {
-            "id": 16,
-            "class": "Compo",
-            "column_min": 578,
-            "row_min": 27,
-            "column_max": 604,
-            "row_max": 34,
-            "width": 26,
-            "height": 7
-        },
-        {
-            "id": 17,
-            "class": "Compo",
-            "column_min": 11,
-            "row_min": 61,
-            "column_max": 537,
-            "row_max": 384,
-            "width": 526,
-            "height": 323
-        },
-        {
-            "id": 18,
-            "class": "Compo",
-            "column_min": 554,
-            "row_min": 65,
-            "column_max": 593,
-            "row_max": 78,
-            "width": 39,
-            "height": 13
-        },
-        {
-            "id": 19,
-            "class": "Compo",
-            "column_min": 597,
-            "row_min": 65,
-            "column_max": 620,
-            "row_max": 78,
-            "width": 23,
-            "height": 13
-        },
-        {
-            "id": 20,
-            "class": "Compo",
-            "column_min": 621,
-            "row_min": 65,
-            "column_max": 642,
-            "row_max": 78,
-            "width": 21,
-            "height": 13
-        },
-        {
-            "id": 21,
-            "class": "Compo",
-            "column_min": 646,
-            "row_min": 65,
-            "column_max": 696,
-            "row_max": 80,
-            "width": 50,
-            "height": 15
-        },
-        {
-            "id": 22,
-            "class": "Compo",
-            "column_min": 555,
-            "row_min": 93,
-            "column_max": 590,
-            "row_max": 128,
-            "width": 35,
-            "height": 35
-        },
-        {
-            "id": 23,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 98,
-            "column_max": 639,
-            "row_max": 107,
-            "width": 45,
-            "height": 9
-        },
-        {
-            "id": 24,
-            "class": "Compo",
-            "column_min": 642,
-            "row_min": 98,
-            "column_max": 670,
-            "row_max": 107,
-            "width": 28,
-            "height": 9
-        },
-        {
-            "id": 25,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 115,
-            "column_max": 620,
-            "row_max": 123,
-            "width": 26,
-            "height": 8
-        },
-        {
-            "id": 26,
-            "class": "Compo",
-            "column_min": 623,
-            "row_min": 115,
-            "column_max": 644,
-            "row_max": 124,
-            "width": 21,
-            "height": 9
-        },
-        {
-            "id": 27,
-            "class": "Compo",
-            "column_min": 648,
-            "row_min": 115,
-            "column_max": 660,
-            "row_max": 123,
-            "width": 12,
-            "height": 8
-        },
-        {
-            "id": 28,
-            "class": "Compo",
-            "column_min": 588,
-            "row_min": 134,
-            "column_max": 665,
-            "row_max": 159,
-            "width": 77,
-            "height": 25
-        },
-        {
-            "id": 29,
-            "class": "Compo",
-            "column_min": 558,
-            "row_min": 171,
-            "column_max": 587,
-            "row_max": 205,
-            "width": 29,
-            "height": 34
-        },
-        {
-            "id": 30,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 175,
-            "column_max": 628,
-            "row_max": 186,
-            "width": 34,
-            "height": 11
-        },
-        {
-            "id": 31,
-            "class": "Compo",
-            "column_min": 651,
-            "row_min": 175,
-            "column_max": 672,
-            "row_max": 184,
-            "width": 21,
-            "height": 9
-        },
-        {
-            "id": 32,
-            "class": "Compo",
-            "column_min": 631,
-            "row_min": 176,
-            "column_max": 648,
-            "row_max": 186,
-            "width": 17,
-            "height": 10
-        },
-        {
-            "id": 33,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 192,
-            "column_max": 610,
-            "row_max": 200,
-            "width": 16,
-            "height": 8
-        },
-        {
-            "id": 34,
-            "class": "Compo",
-            "column_min": 613,
-            "row_min": 192,
-            "column_max": 655,
-            "row_max": 200,
-            "width": 42,
-            "height": 8
-        },
-        {
-            "id": 35,
-            "class": "Compo",
-            "column_min": 658,
-            "row_min": 193,
-            "column_max": 673,
-            "row_max": 202,
-            "width": 15,
-            "height": 9
-        },
-        {
-            "id": 36,
-            "class": "Compo",
-            "column_min": 676,
-            "row_min": 193,
-            "column_max": 695,
-            "row_max": 200,
-            "width": 19,
-            "height": 7
-        },
-        {
-            "id": 37,
-            "class": "Compo",
-            "column_min": 588,
-            "row_min": 211,
-            "column_max": 665,
-            "row_max": 236,
-            "width": 77,
-            "height": 25
-        },
-        {
-            "id": 38,
-            "class": "Compo",
-            "column_min": 555,
-            "row_min": 247,
-            "column_max": 590,
-            "row_max": 283,
-            "width": 35,
-            "height": 36
-        },
-        {
-            "id": 39,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 252,
-            "column_max": 655,
-            "row_max": 263,
-            "width": 61,
-            "height": 11
-        },
-        {
-            "id": 40,
-            "class": "Compo",
-            "column_min": 657,
-            "row_min": 253,
-            "column_max": 688,
-            "row_max": 261,
-            "width": 31,
-            "height": 8
-        },
-        {
-            "id": 41,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 270,
-            "column_max": 638,
-            "row_max": 277,
-            "width": 44,
-            "height": 7
-        },
-        {
-            "id": 42,
-            "class": "Compo",
-            "column_min": 643,
-            "row_min": 270,
-            "column_max": 662,
-            "row_max": 277,
-            "width": 19,
-            "height": 7
-        },
-        {
-            "id": 43,
-            "class": "Compo",
-            "column_min": 664,
-            "row_min": 270,
-            "column_max": 683,
-            "row_max": 277,
-            "width": 19,
-            "height": 7
-        },
-        {
-            "id": 44,
-            "class": "Compo",
-            "column_min": 686,
-            "row_min": 270,
-            "column_max": 740,
-            "row_max": 279,
-            "width": 54,
-            "height": 9
-        },
-        {
-            "id": 45,
-            "class": "Compo",
-            "column_min": 743,
-            "row_min": 270,
-            "column_max": 763,
-            "row_max": 277,
-            "width": 20,
-            "height": 7
-        },
-        {
-            "id": 46,
-            "class": "Compo",
-            "column_min": 588,
-            "row_min": 288,
-            "column_max": 665,
-            "row_max": 313,
-            "width": 77,
-            "height": 25
-        },
-        {
-            "id": 47,
-            "class": "Compo",
-            "column_min": 555,
-            "row_min": 326,
-            "column_max": 589,
-            "row_max": 360,
-            "width": 34,
-            "height": 34
-        },
-        {
-            "id": 48,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 329,
-            "column_max": 626,
-            "row_max": 338,
-            "width": 32,
-            "height": 9
-        },
-        {
-            "id": 49,
-            "class": "Compo",
-            "column_min": 630,
-            "row_min": 329,
-            "column_max": 675,
-            "row_max": 338,
-            "width": 45,
-            "height": 9
-        },
-        {
-            "id": 50,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 347,
-            "column_max": 620,
-            "row_max": 354,
-            "width": 26,
-            "height": 7
-        },
-        {
-            "id": 51,
-            "class": "Compo",
-            "column_min": 623,
-            "row_min": 347,
-            "column_max": 644,
-            "row_max": 356,
-            "width": 21,
-            "height": 9
-        },
-        {
-            "id": 52,
-            "class": "Compo",
-            "column_min": 648,
-            "row_min": 347,
-            "column_max": 660,
-            "row_max": 354,
-            "width": 12,
-            "height": 7
-        },
-        {
-            "id": 53,
-            "class": "Compo",
-            "column_min": 588,
-            "row_min": 365,
-            "column_max": 665,
-            "row_max": 391,
-            "width": 77,
-            "height": 26
-        },
-        {
-            "id": 54,
-            "class": "Compo",
-            "column_min": 555,
-            "row_min": 402,
-            "column_max": 590,
-            "row_max": 437,
-            "width": 35,
-            "height": 35
-        },
-        {
-            "id": 55,
-            "class": "Compo",
-            "column_min": 27,
-            "row_min": 410,
-            "column_max": 69,
-            "row_max": 422,
-            "width": 42,
-            "height": 12
-        },
-        {
-            "id": 56,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 407,
-            "column_max": 615,
-            "row_max": 415,
-            "width": 21,
-            "height": 8
-        },
-        {
-            "id": 57,
-            "class": "Compo",
-            "column_min": 618,
-            "row_min": 407,
-            "column_max": 663,
-            "row_max": 415,
-            "width": 45,
-            "height": 8
-        },
-        {
-            "id": 58,
-            "class": "Compo",
-            "column_min": 594,
-            "row_min": 424,
-            "column_max": 613,
-            "row_max": 432,
-            "width": 19,
-            "height": 8
-        },
-        {
-            "id": 59,
-            "class": "Compo",
-            "column_min": 616,
-            "row_min": 424,
-            "column_max": 637,
-            "row_max": 433,
-            "width": 21,
-            "height": 9
-        },
-        {
-            "id": 60,
-            "class": "Compo",
-            "column_min": 641,
-            "row_min": 424,
-            "column_max": 653,
-            "row_max": 431,
-            "width": 12,
-            "height": 7
-        },
-        {
-            "id": 61,
-            "class": "Compo",
-            "column_min": 28,
-            "row_min": 437,
-            "column_max": 118,
-            "row_max": 448,
-            "width": 90,
-            "height": 11
-        },
-        {
-            "id": 62,
-            "class": "Compo",
-            "column_min": 121,
-            "row_min": 441,
-            "column_max": 136,
-            "row_max": 447,
-            "width": 15,
-            "height": 6
-        },
-        {
-            "id": 63,
-            "class": "Compo",
-            "column_min": 139,
-            "row_min": 441,
-            "column_max": 161,
-            "row_max": 447,
-            "width": 22,
-            "height": 6
-        },
-        {
-            "id": 64,
-            "class": "Compo",
-            "column_min": 588,
-            "row_min": 443,
-            "column_max": 665,
-            "row_max": 468,
-            "width": 77,
-            "height": 25
-        }
-    ]
-}
\ No newline at end of file
diff --git a/screencoder/demo/public/demos.json b/screencoder/demo/public/demos.json
deleted file mode 100644
index 4e3a62f9399dad685011bffebb919eea3627839b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "demos": [
-    {
-      "id": "youtube-interface",
-      "name": "YouTube Interface",
-      "description": "Step-by-step construction process of YouTube homepage interface",
-      "thumbnail": "/assets/demo1.png",
-      "category": "video-platform",
-      "estimatedTime": "20 seconds",
-      "manifest": "/demos/youtube-interface/manifest.json",
-      "steps": 108,
-      "finalHtml": "/demos/youtube-interface/final_youtube.html"
-    },
-    {
-      "id": "instagram",
-      "name": "Instagram Profile",
-      "description": "Step-by-step construction demo of Instagram profile page",
-      "thumbnail": "/assets/demo2.png",
-      "category": "social-media",
-      "estimatedTime": "25 seconds",
-      "manifest": "/demos/instagram/manifest.json",
-      "steps": 143,
-      "finalHtml": "/demos/instagram/final_ins.html"
-    },
-    {
-      "id": "linkedin",
-      "name": "LinkedIn Profile",
-      "description": "Step-by-step construction demo of LinkedIn profile page",
-      "thumbnail": "/assets/demo4.png",
-      "category": "personal-website",
-      "estimatedTime": "20 seconds",
-      "manifest": "/demos/linkedin/manifest.json",
-      "steps": 112,
-      "finalHtml": "/demos/linkedin/final_linkedin.html"
-    },
-    {
-      "id": "design",
-      "name": "Google Search Design",
-      "description": "Step-by-step construction demo of Google search results page",
-      "thumbnail": "/assets/demo3.png",
-      "category": "design",
-      "estimatedTime": "10 seconds",
-      "manifest": "/demos/design/manifest.json",
-      "steps": 58,
-      "finalHtml": "/demos/design/final_design.html"
-    }
-  ],
-  "categories": [
-    {
-      "id": "video-platform",
-      "name": "Video Platform",
-      "description": "YouTube platform interfaces"
-    },
-    {
-      "id": "social-media",
-      "name": "Social Media",
-      "description": "Instagram, LinkedIn interfaces"
-    },
-    {
-      "id": "personal-website",
-      "name": "Personal Website",
-      "description": "Personal website interfaces"
-    },
-    {
-      "id": "design",
-      "name": "Design",
-      "description": "Design interfaces"
-    }
-  ]
-} 
\ No newline at end of file
diff --git a/screencoder/demo/public/demos/design/0001.html b/screencoder/demo/public/demos/design/0001.html
deleted file mode 100644
index 0707bc7195231032bbfa65df213a40a87c218ff7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0001.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0002.html b/screencoder/demo/public/demos/design/0002.html
deleted file mode 100644
index aece2e8a59520fd304b794b8342fe1d6c89bf5f0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0002.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0003.html b/screencoder/demo/public/demos/design/0003.html
deleted file mode 100644
index ba636c8a2a9a2089e44cffb98d2e6bc213f2deb3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0003.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0004.html b/screencoder/demo/public/demos/design/0004.html
deleted file mode 100644
index 8930443fc94efaa4c5690c87c3160e993472e29b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0004.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0005.html b/screencoder/demo/public/demos/design/0005.html
deleted file mode 100644
index 99f2b70ad12abd2b8c27e1bb25d8199958a462ae..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0005.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0006.html b/screencoder/demo/public/demos/design/0006.html
deleted file mode 100644
index 7b821c51572f4b3586e368430d079553ded44ad5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0006.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0007.html b/screencoder/demo/public/demos/design/0007.html
deleted file mode 100644
index 04bd12704b6907b471343b97c7cd67d1af72a6dc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0007.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0008.html b/screencoder/demo/public/demos/design/0008.html
deleted file mode 100644
index a05d5848b5bc124197cbca0b925a35d319e03b1a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0008.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0009.html b/screencoder/demo/public/demos/design/0009.html
deleted file mode 100644
index 6fbd060736ac381fb372322fd3f7e5734bc30ab7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0009.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0010.html b/screencoder/demo/public/demos/design/0010.html
deleted file mode 100644
index 6dc89cfba0b577aa55a5a81817362712ec24a757..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0010.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0011.html b/screencoder/demo/public/demos/design/0011.html
deleted file mode 100644
index cfaa053c7127819a9c22726aabffb3cfc71a2319..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0011.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0012.html b/screencoder/demo/public/demos/design/0012.html
deleted file mode 100644
index 73f222c6c7296eb7699e5306d3f93f15fb59eb13..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0012.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0013.html b/screencoder/demo/public/demos/design/0013.html
deleted file mode 100644
index a9b75b4528c30fb7ba120a1987a9270bc90afb01..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0013.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0014.html b/screencoder/demo/public/demos/design/0014.html
deleted file mode 100644
index 5acebf54bcd8744a6ac139b8543aebafd86390ee..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0014.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0015.html b/screencoder/demo/public/demos/design/0015.html
deleted file mode 100644
index 62abae638126280ceda695c97d4b8d7e09839223..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0015.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0016.html b/screencoder/demo/public/demos/design/0016.html
deleted file mode 100644
index 55550f1e6a2342de497d75bdfac38ea8e70ff977..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0016.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0017.html b/screencoder/demo/public/demos/design/0017.html
deleted file mode 100644
index fe802cf1800946662cc5b79738fac12e2685fbf6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0017.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0018.html b/screencoder/demo/public/demos/design/0018.html
deleted file mode 100644
index 2249254f63ff217a743bb721071a6ea0600ed92d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0018.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start" style="opacity:0;transition:opacity .35s ease-out;">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0019.html b/screencoder/demo/public/demos/design/0019.html
deleted file mode 100644
index b2aafa90cb25c74cc0166d1e01ba9ded0b05adc9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0019.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0020.html b/screencoder/demo/public/demos/design/0020.html
deleted file mode 100644
index ec1f85744e842ebd235f5c5c79b5d07368036caa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0020.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0021.html b/screencoder/demo/public/demos/design/0021.html
deleted file mode 100644
index 4911db2df58dd815d4a66de8ab6ad4980f3cb049..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0021.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0022.html b/screencoder/demo/public/demos/design/0022.html
deleted file mode 100644
index 85583e1d81267e2ca53ed30582675eb234516471..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0022.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0023.html b/screencoder/demo/public/demos/design/0023.html
deleted file mode 100644
index d8f267a1399437912ef87e60ba710d26d2af9049..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0023.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0024.html b/screencoder/demo/public/demos/design/0024.html
deleted file mode 100644
index 0031d8c3ae4d5abc533365e3696f21736bbce83d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0024.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0025.html b/screencoder/demo/public/demos/design/0025.html
deleted file mode 100644
index 7bb531cd91cd69aa78e4d1f0f2842e612d6be40d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0025.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0026.html b/screencoder/demo/public/demos/design/0026.html
deleted file mode 100644
index b5697ef6d1e39379df9006b14a2c0a05156de17c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0026.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0027.html b/screencoder/demo/public/demos/design/0027.html
deleted file mode 100644
index f630ab9a80dc4ad3082819bd2ca011f78992de39..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0027.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0028.html b/screencoder/demo/public/demos/design/0028.html
deleted file mode 100644
index ba7785c6ed0846eae26c15cef09089173b3bfb76..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0028.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0029.html b/screencoder/demo/public/demos/design/0029.html
deleted file mode 100644
index 67bcb5523a6f2ebaaf684636dfef2ac282db6761..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0029.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0030.html b/screencoder/demo/public/demos/design/0030.html
deleted file mode 100644
index 31f8ee1b56bdcdfd0b699612469f9cc2c57ead19..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0030.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0031.html b/screencoder/demo/public/demos/design/0031.html
deleted file mode 100644
index b8523a6c1c0a535e12ce83eef635e476efa6c153..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0031.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0032.html b/screencoder/demo/public/demos/design/0032.html
deleted file mode 100644
index 25bb2496d5aa875332b7611cce48a3b17cb41142..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0032.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1" style="opacity:0;transition:opacity .35s ease-out;"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0033.html b/screencoder/demo/public/demos/design/0033.html
deleted file mode 100644
index f852b2c58d774593e4fd7721c8471c489cb4f0ad..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0033.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0034.html b/screencoder/demo/public/demos/design/0034.html
deleted file mode 100644
index 7d71424e2bf711dc035ceee07cdb1e4d44600410..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0034.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0035.html b/screencoder/demo/public/demos/design/0035.html
deleted file mode 100644
index f08a775f4387d2766f2a4c7f0a89d172ffa30fd0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0035.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2" style="opacity:0;transition:opacity .35s ease-out;">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0036.html b/screencoder/demo/public/demos/design/0036.html
deleted file mode 100644
index 4bc70c21e85a730accf545d65933a49e326141d0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0036.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p style="opacity:0;transition:opacity .35s ease-out;">
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0037.html b/screencoder/demo/public/demos/design/0037.html
deleted file mode 100644
index cb7983ddf7644b0e1a8cbbabcf56488d4e51b866..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0037.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0038.html b/screencoder/demo/public/demos/design/0038.html
deleted file mode 100644
index d2e217ac8ec62aea0b3cebc6b81dd322463faacf..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0038.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0039.html b/screencoder/demo/public/demos/design/0039.html
deleted file mode 100644
index 40c82d28e68d335ecc5b958c42549c5dd3eced25..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0039.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0040.html b/screencoder/demo/public/demos/design/0040.html
deleted file mode 100644
index 1526b96f41ca9d517e60268def5d43df6dc271df..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0040.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0041.html b/screencoder/demo/public/demos/design/0041.html
deleted file mode 100644
index aa12faf5a03e6be3f7c9fa3aa06224d00ea46bcd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0041.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0042.html b/screencoder/demo/public/demos/design/0042.html
deleted file mode 100644
index c8fedc7aa72925e37797605614c98fc8d0a50fee..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0042.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0043.html b/screencoder/demo/public/demos/design/0043.html
deleted file mode 100644
index 0b296419e6a06044be04d914b01bbbeaaf41508a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0043.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0044.html b/screencoder/demo/public/demos/design/0044.html
deleted file mode 100644
index 74464c6516316385e54de0ee3cc93ec79b21415e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0044.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0045.html b/screencoder/demo/public/demos/design/0045.html
deleted file mode 100644
index b7f20303dba1b3e2fa5e02f666f93d47e7501ca2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0045.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0046.html b/screencoder/demo/public/demos/design/0046.html
deleted file mode 100644
index e839d75c0fcb2579407e17fbedfbc69374a06e33..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0046.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0047.html b/screencoder/demo/public/demos/design/0047.html
deleted file mode 100644
index 8982aa5d6b91816bc1c52b3e76176765ca17c9de..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0047.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0048.html b/screencoder/demo/public/demos/design/0048.html
deleted file mode 100644
index 377991bca000139b51ad4ac8d9f08a99c9550335..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0048.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0049.html b/screencoder/demo/public/demos/design/0049.html
deleted file mode 100644
index 0411717f5731ea1effb30a37edfcb31e43f1e8f8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0049.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0050.html b/screencoder/demo/public/demos/design/0050.html
deleted file mode 100644
index 7f085c8fa78de46ca2bc649787acf3b7c65f48c5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0050.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0051.html b/screencoder/demo/public/demos/design/0051.html
deleted file mode 100644
index 6b09d9af80fca30dff4022bf6271c46f9e4c70cd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0051.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0052.html b/screencoder/demo/public/demos/design/0052.html
deleted file mode 100644
index 3f81eeedd82a756bed7eda265801cd2bc2cce863..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0052.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0053.html b/screencoder/demo/public/demos/design/0053.html
deleted file mode 100644
index db398c133bd414e9b0b3b7f5771f649537be64d9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0053.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0054.html b/screencoder/demo/public/demos/design/0054.html
deleted file mode 100644
index 9265ab73f46b945cf4bf0892accceec6eec797a5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0054.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0055.html b/screencoder/demo/public/demos/design/0055.html
deleted file mode 100644
index a261b0b9b813b5052d43067785eb74c959648fe9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0055.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0056.html b/screencoder/demo/public/demos/design/0056.html
deleted file mode 100644
index 3acd43cc8765c650b6a6dd06565fb8bc02b8fc28..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0056.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0057.html b/screencoder/demo/public/demos/design/0057.html
deleted file mode 100644
index d1da26b0e2c108a753afcd7aef6e73fe4284eae3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0057.html
+++ /dev/null
@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-8">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-<p>
-       Donald Trump’s entry covers business, "The Apprentice," presidency, policies, and post-White House influence—capturing a polarizing political legacy.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0058.html b/screencoder/demo/public/demos/design/0058.html
deleted file mode 100644
index 22a778dd51e060847b6457355c459dba90bdc47e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0058.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-<p>
-         Tesla revolutionized electric cars under him, while SpaceX mastered reusable rockets, slashing space travel costs. Ambitions like Mars colonization drive innovation globally.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-44 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-<p>
-         Post-presidency, he influences GOP dynamics. His "America First" policies and media presence kept him central in political discourse.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-<p>
-         His real estate empire and branding ventures show enduring corporate influence, even amid political turbulence.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-8">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-<p>
-       Donald Trump’s entry covers business, "The Apprentice," presidency, policies, and post-White House influence—capturing a polarizing political legacy.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0059.html b/screencoder/demo/public/demos/design/0059.html
deleted file mode 100644
index 985fa08a682129b4b738d2315d76258a5afab310..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0059.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-<p>
-         Tesla revolutionized electric cars under him, while SpaceX mastered reusable rockets, slashing space travel costs. Ambitions like Mars colonization drive innovation globally.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-44 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-<p>
-         Post-presidency, he influences GOP dynamics. His "America First" policies and media presence kept him central in political discourse.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-<p>
-         His real estate empire and branding ventures show enduring corporate influence, even amid political turbulence.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-8">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-<p>
-       Donald Trump’s entry covers business, "The Apprentice," presidency, policies, and post-White House influence—capturing a polarizing political legacy.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0060.html b/screencoder/demo/public/demos/design/0060.html
deleted file mode 100644
index fa61667ed64cda4c279ab10d16fe506c30d4a072..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0060.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-<p>
-         Tesla revolutionized electric cars under him, while SpaceX mastered reusable rockets, slashing space travel costs. Ambitions like Mars colonization drive innovation globally.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-44 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-<p>
-         Post-presidency, he influences GOP dynamics. His "America First" policies and media presence kept him central in political discourse.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-<p>
-         His real estate empire and branding ventures show enduring corporate influence, even amid political turbulence.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-8">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-<p>
-       Donald Trump’s entry covers business, "The Apprentice," presidency, policies, and post-White House influence—capturing a polarizing political legacy.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/0061.html b/screencoder/demo/public/demos/design/0061.html
deleted file mode 100644
index 8099c762b4d31965ccbd184a15ae1c25fb320f52..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/0061.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-<div class="flex items-center p-2 border-b border-gray-300">
-<span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-<div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-<input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-<div class="flex items-center space-x-4 ml-auto">
-<svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<div class="w-8 h-8 bg-gray-300 rounded-full">
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-<div class="flex items-center border-b border-black">
-<a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-<a class="px-3 py-2" href="#">
-      News
-     </a>
-<a class="px-3 py-2" href="#">
-      Images
-     </a>
-<a class="px-3 py-2" href="#">
-      Videos
-     </a>
-<a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-<a class="px-3 py-2" href="#">
-      More
-     </a>
-</div>
-</div>
-<div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-<div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-<h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-<div class="flex flex-col space-y-6">
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-<p>
-         Tesla revolutionized electric cars under him, while SpaceX mastered reusable rockets, slashing space travel costs. Ambitions like Mars colonization drive innovation globally.
-        </p>
-</div>
-<div class="w-32 h-32 bg-gray-300 rounded">
-</div>
-</div>
-<div class="flex flex-row items-start space-x-4">
-<div class="w-32 h-44 bg-gray-300 rounded">
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-<p>
-         Post-presidency, he influences GOP dynamics. His "America First" policies and media presence kept him central in political discourse.
-        </p>
-</div>
-<div class="flex-1 space-y-2">
-<p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-<p>
-         His real estate empire and branding ventures show enduring corporate influence, even amid political turbulence.
-        </p>
-</div>
-</div>
-</div>
-<button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-8">
-      More news
-     </button>
-<hr class="w-full border-t border-gray-300 my-1"/>
-<div class="p-4">
-<h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-<div class="space-y-2">
-<p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-<p>
-       Donald Trump’s entry covers business, "The Apprentice," presidency, policies, and post-White House influence—capturing a polarizing political legacy.
-      </p>
-<p>
-       Both pages act as encyclopedic hubs, tracking achievements, controversies, and how they shaped business, tech, and political landscapes worldwide.
-      </p>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-<h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-<div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Source
-      </span>
-<span class="ml-2 text-gray-600">
-       Politico
-      </span>
-</div>
-<div class="flex items-center mb-3">
-<svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Start date
-      </span>
-<span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-</div>
-<div class="flex items-center mb-5">
-<svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span class="font-semibold">
-       Cause
-      </span>
-<span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-</div>
-<p class="text-gray-700 mb-2">
-        The Trump-Musk feud highlights a clash between political power and technological influence. Elon Musk criticized Donald Trump’s leadership on issues like COVID-19 and climate change, while Trump accused Musk of relying on government support for his companies. Their rivalry escalated in 2024 through public exchanges on social media platforms, reflecting deeper ideological divides. Musk represents innovation and futurism, while Trump appeals to traditional conservative values. Despite their differences, both continue to shape public discourse and influence their respective spheres.
-     </p>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/design/final_design.html b/screencoder/demo/public/demos/design/final_design.html
deleted file mode 100644
index 9e2f3edbcdd52387d4b08fdd8399e4e9cbfa5a6d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/final_design.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-    <div class="flex items-center p-2 border-b border-gray-300">
-     <span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-     <div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-      <input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-     </div>
-     <div class="flex items-center space-x-4 ml-auto">
-      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <img src="../../assets/demo3_cropped/demo3_4.png" class="w-8 h-8 object-cover rounded" alt="Story 1" />
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-    <div class="flex items-center border-b border-black">
-     <a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-     <a class="px-3 py-2" href="#">
-      News
-     </a>
-     <a class="px-3 py-2" href="#">
-      Images
-     </a>
-     <a class="px-3 py-2" href="#">
-      Videos
-     </a>
-     <a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-     <a class="px-3 py-2" href="#">
-      More
-     </a>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-    <div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-     <h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-     <div class="flex flex-col space-y-6">
-      <div class="flex flex-row items-start space-x-4">
-      <img src="../../assets/demo3_cropped/demo3_1.png" class="w-32 h-32 object-cover rounded" alt="Story 1" />
-       <div class="flex-1 space-y-2">
-        <p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-       </div>
-       <img src="../../assets/demo3_cropped/demo3_2.png" class="w-32 h-32 object-cover rounded" alt="Story 2" />
-      </div>
-      <div class="flex flex-row items-start space-x-4">
-       <img src="../../assets/demo3_cropped/demo3_3.png" class="w-32 h-32 object-cover rounded" alt="Story 3" />
-       <div class="flex-1 space-y-2">
-        <p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-       </div>
-       <div class="flex-1 space-y-2">
-        <p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-       </div>
-      </div>
-     </div>
-     <button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-     <hr class="w-full border-t border-gray-300 my-1"/>
-     <div class="p-4">
-      <h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-      <div class="space-y-2">
-      <p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-    <div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-     <h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-     <img src="../../assets/demo3_cropped/demo3_5.png" class="w-full h-32 object-cover rounded mb-4" alt="Feud Image" />
-     <div class="flex items-center mb-3">
-      <svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Source
-      </span>
-      <span class="ml-2 text-gray-600">
-       Politico
-      </span>
-     </div>
-     <div class="flex items-center mb-3">
-      <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Start date
-      </span>
-      <span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-     </div>
-     <div class="flex items-center mb-5">
-      <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Cause
-      </span>
-      <span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-     </div>
-     <p class="text-gray-700 mb-2">
-      The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/design/manifest.json b/screencoder/demo/public/demos/design/manifest.json
deleted file mode 100644
index 8887ca522f3ca0e50d64e39a1bcc3c0ffd0c50e6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/manifest.json
+++ /dev/null
@@ -1,282 +0,0 @@
-[
-  {
-    "file": "0001.html",
-    "caption": "Elements: 1/56",
-    "diff": ""
-  },
-  {
-    "file": "0002.html",
-    "caption": "Elements: 2/56",
-    "diff": "--- \n+++ \n@@ -36,7 +36,7 @@\n <div class=\"container\">\n <div class=\"box\" id=\"1\" style=\"left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;\">\n <div class=\"flex items-center p-2 border-b border-gray-300\">\n-<span class=\"text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4\">\n       Google\n      </span>\n <div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0003.html",
-    "caption": "Elements: 3/56",
-    "diff": "--- \n+++ \n@@ -39,7 +39,7 @@\n <span class=\"text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4\">\n       Google\n      </span>\n-<div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\">\n <input class=\"w-full outline-none bg-transparent text-gray-800 placeholder-gray-600\" placeholder=\"elon trump\" style=\"opacity:0;transition:opacity .35s ease-out;\" type=\"text\"/>\n <svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0004.html",
-    "caption": "Elements: 4/56",
-    "diff": "--- \n+++ \n@@ -40,7 +40,7 @@\n       Google\n      </span>\n <div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\">\n-<input class=\"w-full outline-none bg-transparent text-gray-800 placeholder-gray-600\" placeholder=\"elon trump\" style=\"opacity:0;transition:opacity .35s ease-out;\" type=\"text\"/>\n+<input class=\"w-full outline-none bg-transparent text-gray-800 placeholder-gray-600\" placeholder=\"elon trump\" type=\"text\"/>\n <svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0005.html",
-    "caption": "Elements: 5/56",
-    "diff": "--- \n+++ \n@@ -41,7 +41,7 @@\n      </span>\n <div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\">\n <input class=\"w-full outline-none bg-transparent text-gray-800 placeholder-gray-600\" placeholder=\"elon trump\" type=\"text\"/>\n-<svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0006.html",
-    "caption": "Elements: 6/56",
-    "diff": "--- \n+++ \n@@ -42,7 +42,7 @@\n <div class=\"flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl\">\n <input class=\"w-full outline-none bg-transparent text-gray-800 placeholder-gray-600\" placeholder=\"elon trump\" type=\"text\"/>\n <svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n </div>"
-  },
-  {
-    "file": "0007.html",
-    "caption": "Elements: 7/56",
-    "diff": "--- \n+++ \n@@ -46,7 +46,7 @@\n </path>\n </svg>\n </div>\n-<div class=\"flex items-center space-x-4 ml-auto\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4 ml-auto\">\n <svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6h16M4 12h16M4 18h16\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0008.html",
-    "caption": "Elements: 8/56",
-    "diff": "--- \n+++ \n@@ -47,7 +47,7 @@\n </svg>\n </div>\n <div class=\"flex items-center space-x-4 ml-auto\">\n-<svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6h16M4 12h16M4 18h16\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0009.html",
-    "caption": "Elements: 9/56",
-    "diff": "--- \n+++ \n@@ -48,7 +48,7 @@\n </div>\n <div class=\"flex items-center space-x-4 ml-auto\">\n <svg class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M4 6h16M4 12h16M4 18h16\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M4 6h16M4 12h16M4 18h16\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <div class=\"w-8 h-8 bg-gray-300 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0010.html",
-    "caption": "Elements: 10/56",
-    "diff": "--- \n+++ \n@@ -51,7 +51,7 @@\n <path d=\"M4 6h16M4 12h16M4 18h16\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<div class=\"w-8 h-8 bg-gray-300 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-8 h-8 bg-gray-300 rounded-full\">\n </div>\n </div>\n </div>"
-  },
-  {
-    "file": "0011.html",
-    "caption": "Elements: 11/56",
-    "diff": "--- \n+++ \n@@ -57,7 +57,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"2\" style=\"left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;\">\n-<div class=\"flex items-center border-b border-black\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center border-b border-black\">\n <a class=\"px-3 py-2 border-b-2 border-black font-semibold\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n       All\n      </a>"
-  },
-  {
-    "file": "0012.html",
-    "caption": "Elements: 12/56",
-    "diff": "--- \n+++ \n@@ -58,7 +58,7 @@\n </div>\n <div class=\"box\" id=\"2\" style=\"left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;\">\n <div class=\"flex items-center border-b border-black\">\n-<a class=\"px-3 py-2 border-b-2 border-black font-semibold\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2 border-b-2 border-black font-semibold\" href=\"#\">\n       All\n      </a>\n <a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0013.html",
-    "caption": "Elements: 13/56",
-    "diff": "--- \n+++ \n@@ -61,7 +61,7 @@\n <a class=\"px-3 py-2 border-b-2 border-black font-semibold\" href=\"#\">\n       All\n      </a>\n-<a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2\" href=\"#\">\n       News\n      </a>\n <a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0014.html",
-    "caption": "Elements: 14/56",
-    "diff": "--- \n+++ \n@@ -64,7 +64,7 @@\n <a class=\"px-3 py-2\" href=\"#\">\n       News\n      </a>\n-<a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2\" href=\"#\">\n       Images\n      </a>\n <a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0015.html",
-    "caption": "Elements: 15/56",
-    "diff": "--- \n+++ \n@@ -67,7 +67,7 @@\n <a class=\"px-3 py-2\" href=\"#\">\n       Images\n      </a>\n-<a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2\" href=\"#\">\n       Videos\n      </a>\n <a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0016.html",
-    "caption": "Elements: 16/56",
-    "diff": "--- \n+++ \n@@ -70,7 +70,7 @@\n <a class=\"px-3 py-2\" href=\"#\">\n       Videos\n      </a>\n-<a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2\" href=\"#\">\n       Shopping\n      </a>\n <a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0017.html",
-    "caption": "Elements: 17/56",
-    "diff": "--- \n+++ \n@@ -73,7 +73,7 @@\n <a class=\"px-3 py-2\" href=\"#\">\n       Shopping\n      </a>\n-<a class=\"px-3 py-2\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"px-3 py-2\" href=\"#\">\n       More\n      </a>\n </div>"
-  },
-  {
-    "file": "0018.html",
-    "caption": "Elements: 18/56",
-    "diff": "--- \n+++ \n@@ -79,7 +79,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"3\" style=\"left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;\">\n-<div class=\"flex flex-col items-center p-4 border border-gray-300 rounded-lg\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center p-4 border border-gray-300 rounded-lg\">\n <h2 class=\"text-2xl font-bold mb-4 self-start\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n       Top stories\n      </h2>"
-  },
-  {
-    "file": "0019.html",
-    "caption": "Elements: 19/56",
-    "diff": "--- \n+++ \n@@ -80,7 +80,7 @@\n </div>\n <div class=\"box\" id=\"3\" style=\"left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;\">\n <div class=\"flex flex-col items-center p-4 border border-gray-300 rounded-lg\">\n-<h2 class=\"text-2xl font-bold mb-4 self-start\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h2 class=\"text-2xl font-bold mb-4 self-start\">\n       Top stories\n      </h2>\n <div class=\"flex flex-col space-y-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0020.html",
-    "caption": "Elements: 20/56",
-    "diff": "--- \n+++ \n@@ -83,7 +83,7 @@\n <h2 class=\"text-2xl font-bold mb-4 self-start\">\n       Top stories\n      </h2>\n-<div class=\"flex flex-col space-y-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col space-y-6\">\n <div class=\"flex flex-row items-start space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0021.html",
-    "caption": "Elements: 21/56",
-    "diff": "--- \n+++ \n@@ -84,7 +84,7 @@\n       Top stories\n      </h2>\n <div class=\"flex flex-col space-y-6\">\n-<div class=\"flex flex-row items-start space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-row items-start space-x-4\">\n <div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0022.html",
-    "caption": "Elements: 22/56",
-    "diff": "--- \n+++ \n@@ -85,7 +85,7 @@\n      </h2>\n <div class=\"flex flex-col space-y-6\">\n <div class=\"flex flex-row items-start space-x-4\">\n-<div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n <div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0023.html",
-    "caption": "Elements: 23/56",
-    "diff": "--- \n+++ \n@@ -87,7 +87,7 @@\n <div class=\"flex flex-row items-start space-x-4\">\n <div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n-<div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1 space-y-2\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">\n          Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.\n         </p>"
-  },
-  {
-    "file": "0024.html",
-    "caption": "Elements: 24/56",
-    "diff": "--- \n+++ \n@@ -88,7 +88,7 @@\n <div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n <div class=\"flex-1 space-y-2\">\n-<p style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p>\n          Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.\n         </p>\n </div>"
-  },
-  {
-    "file": "0025.html",
-    "caption": "Elements: 25/56",
-    "diff": "--- \n+++ \n@@ -92,7 +92,7 @@\n          Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.\n         </p>\n </div>\n-<div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n </div>\n <div class=\"flex flex-row items-start space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0026.html",
-    "caption": "Elements: 26/56",
-    "diff": "--- \n+++ \n@@ -95,7 +95,7 @@\n <div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n </div>\n-<div class=\"flex flex-row items-start space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-row items-start space-x-4\">\n <div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0027.html",
-    "caption": "Elements: 27/56",
-    "diff": "--- \n+++ \n@@ -96,7 +96,7 @@\n </div>\n </div>\n <div class=\"flex flex-row items-start space-x-4\">\n-<div class=\"w-32 h-32 bg-gray-300 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n <div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0028.html",
-    "caption": "Elements: 28/56",
-    "diff": "--- \n+++ \n@@ -98,7 +98,7 @@\n <div class=\"flex flex-row items-start space-x-4\">\n <div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n-<div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1 space-y-2\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">\n          Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, \"The Apprentice,\" he prioritized immigration, trade, and tax reforms in office.\n         </p>"
-  },
-  {
-    "file": "0029.html",
-    "caption": "Elements: 29/56",
-    "diff": "--- \n+++ \n@@ -99,7 +99,7 @@\n <div class=\"w-32 h-32 bg-gray-300 rounded\">\n </div>\n <div class=\"flex-1 space-y-2\">\n-<p style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p>\n          Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, \"The Apprentice,\" he prioritized immigration, trade, and tax reforms in office.\n         </p>\n </div>"
-  },
-  {
-    "file": "0030.html",
-    "caption": "Elements: 30/56",
-    "diff": "--- \n+++ \n@@ -103,7 +103,7 @@\n          Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, \"The Apprentice,\" he prioritized immigration, trade, and tax reforms in office.\n         </p>\n </div>\n-<div class=\"flex-1 space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1 space-y-2\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">\n          Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.\n         </p>"
-  },
-  {
-    "file": "0031.html",
-    "caption": "Elements: 31/56",
-    "diff": "--- \n+++ \n@@ -104,7 +104,7 @@\n         </p>\n </div>\n <div class=\"flex-1 space-y-2\">\n-<p style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p>\n          Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.\n         </p>\n </div>"
-  },
-  {
-    "file": "0032.html",
-    "caption": "Elements: 32/56",
-    "diff": "--- \n+++ \n@@ -110,7 +110,7 @@\n </div>\n </div>\n </div>\n-<button class=\"bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6\">\n       More news\n      </button>\n <hr class=\"w-full border-t border-gray-300 my-1\" style=\"opacity:0;transition:opacity .35s ease-out;\"/>"
-  },
-  {
-    "file": "0033.html",
-    "caption": "Elements: 33/56",
-    "diff": "--- \n+++ \n@@ -113,7 +113,7 @@\n <button class=\"bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6\">\n       More news\n      </button>\n-<hr class=\"w-full border-t border-gray-300 my-1\" style=\"opacity:0;transition:opacity .35s ease-out;\"/>\n+<hr class=\"w-full border-t border-gray-300 my-1\"/>\n <div class=\"p-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">Wikipedia</h2>\n <div class=\"space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0034.html",
-    "caption": "Elements: 34/56",
-    "diff": "--- \n+++ \n@@ -114,7 +114,7 @@\n       More news\n      </button>\n <hr class=\"w-full border-t border-gray-300 my-1\"/>\n-<div class=\"p-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-4\">\n <h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">Wikipedia</h2>\n <div class=\"space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0035.html",
-    "caption": "Elements: 35/56",
-    "diff": "--- \n+++ \n@@ -115,7 +115,7 @@\n      </button>\n <hr class=\"w-full border-t border-gray-300 my-1\"/>\n <div class=\"p-4\">\n-<h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">Wikipedia</h2>\n+<h2 class=\"text-2xl font-bold mb-4\">Wikipedia</h2>\n <div class=\"space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts."
-  },
-  {
-    "file": "0036.html",
-    "caption": "Elements: 36/56",
-    "diff": "--- \n+++ \n@@ -116,7 +116,7 @@\n <hr class=\"w-full border-t border-gray-300 my-1\"/>\n <div class=\"p-4\">\n <h2 class=\"text-2xl font-bold mb-4\">Wikipedia</h2>\n-<div class=\"space-y-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"space-y-2\">\n <p style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.\n       </p>"
-  },
-  {
-    "file": "0037.html",
-    "caption": "Elements: 37/56",
-    "diff": "--- \n+++ \n@@ -117,7 +117,7 @@\n <div class=\"p-4\">\n <h2 class=\"text-2xl font-bold mb-4\">Wikipedia</h2>\n <div class=\"space-y-2\">\n-<p style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p>\n        Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.\n       </p>\n </div>"
-  },
-  {
-    "file": "0038.html",
-    "caption": "Elements: 38/56",
-    "diff": "--- \n+++ \n@@ -125,7 +125,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;\">\n-<div class=\"max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4\">\n <h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n       Trump-Musk feud\n      </h2>"
-  },
-  {
-    "file": "0039.html",
-    "caption": "Elements: 39/56",
-    "diff": "--- \n+++ \n@@ -126,7 +126,7 @@\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;\">\n <div class=\"max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4\">\n-<h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h2 class=\"text-2xl font-bold mb-4\">\n       Trump-Musk feud\n      </h2>\n <div class=\"w-full h-32 bg-gray-300 rounded mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>"
-  },
-  {
-    "file": "0040.html",
-    "caption": "Elements: 40/56",
-    "diff": "--- \n+++ \n@@ -129,7 +129,7 @@\n <h2 class=\"text-2xl font-bold mb-4\">\n       Trump-Musk feud\n      </h2>\n-<div class=\"w-full h-32 bg-gray-300 rounded mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-32 bg-gray-300 rounded mb-4\"></div>\n <div class=\"flex items-center mb-3\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-6 h-6 text-indigo-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0041.html",
-    "caption": "Elements: 41/56",
-    "diff": "--- \n+++ \n@@ -130,7 +130,7 @@\n       Trump-Musk feud\n      </h2>\n <div class=\"w-full h-32 bg-gray-300 rounded mb-4\"></div>\n-<div class=\"flex items-center mb-3\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-3\">\n <svg class=\"w-6 h-6 text-indigo-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0042.html",
-    "caption": "Elements: 42/56",
-    "diff": "--- \n+++ \n@@ -131,7 +131,7 @@\n      </h2>\n <div class=\"w-full h-32 bg-gray-300 rounded mb-4\"></div>\n <div class=\"flex items-center mb-3\">\n-<svg class=\"w-6 h-6 text-indigo-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-6 h-6 text-indigo-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0043.html",
-    "caption": "Elements: 43/56",
-    "diff": "--- \n+++ \n@@ -132,7 +132,7 @@\n <div class=\"w-full h-32 bg-gray-300 rounded mb-4\"></div>\n <div class=\"flex items-center mb-3\">\n <svg class=\"w-6 h-6 text-indigo-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0044.html",
-    "caption": "Elements: 44/56",
-    "diff": "--- \n+++ \n@@ -135,7 +135,7 @@\n <path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-semibold\">\n        Source\n       </span>\n <span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0045.html",
-    "caption": "Elements: 45/56",
-    "diff": "--- \n+++ \n@@ -138,7 +138,7 @@\n <span class=\"font-semibold\">\n        Source\n       </span>\n-<span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"ml-2 text-gray-600\">\n        Politico\n       </span>\n </div>"
-  },
-  {
-    "file": "0046.html",
-    "caption": "Elements: 46/56",
-    "diff": "--- \n+++ \n@@ -142,7 +142,7 @@\n        Politico\n       </span>\n </div>\n-<div class=\"flex items-center mb-3\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-3\">\n <svg class=\"w-6 h-6 text-green-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0047.html",
-    "caption": "Elements: 47/56",
-    "diff": "--- \n+++ \n@@ -143,7 +143,7 @@\n       </span>\n </div>\n <div class=\"flex items-center mb-3\">\n-<svg class=\"w-6 h-6 text-green-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-6 h-6 text-green-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0048.html",
-    "caption": "Elements: 48/56",
-    "diff": "--- \n+++ \n@@ -144,7 +144,7 @@\n </div>\n <div class=\"flex items-center mb-3\">\n <svg class=\"w-6 h-6 text-green-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0049.html",
-    "caption": "Elements: 49/56",
-    "diff": "--- \n+++ \n@@ -147,7 +147,7 @@\n <path d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-semibold\">\n        Start date\n       </span>\n <span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0050.html",
-    "caption": "Elements: 50/56",
-    "diff": "--- \n+++ \n@@ -150,7 +150,7 @@\n <span class=\"font-semibold\">\n        Start date\n       </span>\n-<span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"ml-2 text-gray-600\">\n        April 2024\n       </span>\n </div>"
-  },
-  {
-    "file": "0051.html",
-    "caption": "Elements: 51/56",
-    "diff": "--- \n+++ \n@@ -154,7 +154,7 @@\n        April 2024\n       </span>\n </div>\n-<div class=\"flex items-center mb-5\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-5\">\n <svg class=\"w-6 h-6 text-red-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 10V3L4 14h7v7l9-11h-7z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0052.html",
-    "caption": "Elements: 52/56",
-    "diff": "--- \n+++ \n@@ -155,7 +155,7 @@\n       </span>\n </div>\n <div class=\"flex items-center mb-5\">\n-<svg class=\"w-6 h-6 text-red-500 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-6 h-6 text-red-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13 10V3L4 14h7v7l9-11h-7z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0053.html",
-    "caption": "Elements: 53/56",
-    "diff": "--- \n+++ \n@@ -156,7 +156,7 @@\n </div>\n <div class=\"flex items-center mb-5\">\n <svg class=\"w-6 h-6 text-red-500 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M13 10V3L4 14h7v7l9-11h-7z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M13 10V3L4 14h7v7l9-11h-7z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0054.html",
-    "caption": "Elements: 54/56",
-    "diff": "--- \n+++ \n@@ -159,7 +159,7 @@\n <path d=\"M13 10V3L4 14h7v7l9-11h-7z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span class=\"font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-semibold\">\n        Cause\n       </span>\n <span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0055.html",
-    "caption": "Elements: 55/56",
-    "diff": "--- \n+++ \n@@ -162,7 +162,7 @@\n <span class=\"font-semibold\">\n        Cause\n       </span>\n-<span class=\"ml-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"ml-2 text-gray-600\">\n        Social media spat\n       </span>\n </div>"
-  },
-  {
-    "file": "0056.html",
-    "caption": "Elements: 56/56",
-    "diff": "--- \n+++ \n@@ -166,7 +166,7 @@\n        Social media spat\n       </span>\n </div>\n-<p class=\"text-gray-700 mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-700 mb-2\">\n         The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.\n      </p>\n </div>"
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/demos/design/original_design.html b/screencoder/demo/public/demos/design/original_design.html
deleted file mode 100644
index 3f46cf82e25a7bb122cf19c52775a5dcdf1b6acb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/design/original_design.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 3.7760416666666665%; top: 4.00390625%; width: 92.12239583333334%; height: 8.0859375%;">
-    <div class="flex items-center p-2 border-b border-gray-300">
-     <span class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-green-500 via-red-500 via-yellow-400 mr-4">
-      Google
-     </span>
-     <div class="flex-1 flex items-center border-2 border-gray-700 rounded-full px-3 py-1 max-w-xl">
-      <input class="w-full outline-none bg-transparent text-gray-800 placeholder-gray-600" placeholder="elon trump" type="text"/>
-      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-     </div>
-     <div class="flex items-center space-x-4 ml-auto">
-      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <div class="w-8 h-8 bg-gray-300 rounded-full">
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 3.7760416666666665%; top: 12.578125%; width: 92.12239583333334%; height: 5.859375%;">
-    <div class="flex items-center border-b border-black">
-     <a class="px-3 py-2 border-b-2 border-black font-semibold" href="#">
-      All
-     </a>
-     <a class="px-3 py-2" href="#">
-      News
-     </a>
-     <a class="px-3 py-2" href="#">
-      Images
-     </a>
-     <a class="px-3 py-2" href="#">
-      Videos
-     </a>
-     <a class="px-3 py-2" href="#">
-      Shopping
-     </a>
-     <a class="px-3 py-2" href="#">
-      More
-     </a>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 3.7760416666666665%; top: 23.4375%; width: 62.760416666666664%; height: 71.2890625%;">
-    <div class="flex flex-col items-center p-4 border border-gray-300 rounded-lg">
-     <h2 class="text-2xl font-bold mb-4 self-start">
-      Top stories
-     </h2>
-     <div class="flex flex-col space-y-6">
-      <div class="flex flex-row items-start space-x-4">
-       <div class="w-32 h-32 bg-gray-300 rounded">
-       </div>
-       <div class="flex-1 space-y-2">
-        <p>
-         Elon Musk is a visionary entrepreneur leading Tesla, SpaceX, Neuralink, &amp; The Boring Company. His work in EVs, space tech, and brain-computer interfaces reshapes industries.
-        </p>
-       </div>
-       <div class="w-32 h-32 bg-gray-300 rounded">
-       </div>
-      </div>
-      <div class="flex flex-row items-start space-x-4">
-       <div class="w-32 h-32 bg-gray-300 rounded">
-       </div>
-       <div class="flex-1 space-y-2">
-        <p>
-         Donald Trump, ex-US President, is a businessman &amp; TV personality. Known for real estate, "The Apprentice," he prioritized immigration, trade, and tax reforms in office.
-        </p>
-       </div>
-       <div class="flex-1 space-y-2">
-        <p>
-         Trump’s career blends business, entertainment, &amp; politics. Controversies and policy shifts defined his term, leaving a lasting mark on US political culture.
-        </p>
-       </div>
-      </div>
-     </div>
-     <button class="bg-gray-200 px-6 py-2 rounded-full text-gray-700 font-semibold mb-6">
-      More news
-     </button>
-     <hr class="w-full border-t border-gray-300 my-1"/>
-     <div class="p-4">
-      <h2 class="text-2xl font-bold mb-4">Wikipedia</h2>
-      <div class="space-y-2">
-      <p>
-       Elon Musk’s Wikipedia details his S.African roots, PayPal founding, Tesla’s EV dominance, and SpaceX’s reusable rockets—chronicling tech revolution efforts.
-      </p>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="4" style="left: 67.578125%; top: 23.4375%; width: 24.674479166666664%; height: 71.2890625%;">
-    <div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow p-4">
-     <h2 class="text-2xl font-bold mb-4">
-      Trump-Musk feud
-     </h2>
-     <div class="w-full h-32 bg-gray-300 rounded mb-4"></div>
-     <div class="flex items-center mb-3">
-      <svg class="w-6 h-6 text-indigo-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Source
-      </span>
-      <span class="ml-2 text-gray-600">
-       Politico
-      </span>
-     </div>
-     <div class="flex items-center mb-3">
-      <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Start date
-      </span>
-      <span class="ml-2 text-gray-600">
-       April 2024
-      </span>
-     </div>
-     <div class="flex items-center mb-5">
-      <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-       <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-       </path>
-      </svg>
-      <span class="font-semibold">
-       Cause
-      </span>
-      <span class="ml-2 text-gray-600">
-       Social media spat
-      </span>
-     </div>
-     <p class="text-gray-700 mb-2">
-        The Trump-Musk feud reflects tensions between tech innovation and conservative politics, marked by public clashes over policy, leadership, and influence, with both figures commanding large, opposing followings.
-     </p>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0001.html b/screencoder/demo/public/demos/instagram/0001.html
deleted file mode 100644
index 10a44d9086393c09047dbf387c516c4adb59cb90..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0001.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="text-3xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0002.html b/screencoder/demo/public/demos/instagram/0002.html
deleted file mode 100644
index c8f7d9ce4c894e59f47e46f3c9eaabce1802f7eb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0002.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0003.html b/screencoder/demo/public/demos/instagram/0003.html
deleted file mode 100644
index ddcd4de92971dac00cf8ede43b940352cfdfa144..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0003.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0004.html b/screencoder/demo/public/demos/instagram/0004.html
deleted file mode 100644
index 63d89b097d82e9ca9cbee451e9ab7be25236ba51..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0004.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0005.html b/screencoder/demo/public/demos/instagram/0005.html
deleted file mode 100644
index ef16aab3b16954a759e076780915fc6a54631b6c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0005.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0006.html b/screencoder/demo/public/demos/instagram/0006.html
deleted file mode 100644
index cf64322aeae902301527851ac6a04c5916fefcb1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0006.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0007.html b/screencoder/demo/public/demos/instagram/0007.html
deleted file mode 100644
index 7a6ba33860fc58a36f5965a31f4a9e88fd87b50a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0007.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0008.html b/screencoder/demo/public/demos/instagram/0008.html
deleted file mode 100644
index 82ddc0b9c96d65c39307ed217e6111035985ece4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0008.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0009.html b/screencoder/demo/public/demos/instagram/0009.html
deleted file mode 100644
index 066a3b770cdf908f8e7ff3f9f383900acff1895a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0009.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0010.html b/screencoder/demo/public/demos/instagram/0010.html
deleted file mode 100644
index 4459ca6d0f6b23f264a35d344b31aa52f412455f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0010.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0011.html b/screencoder/demo/public/demos/instagram/0011.html
deleted file mode 100644
index 1cbc77d17a10c12ee2fc5cdf9e7e196a589772cb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0011.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0012.html b/screencoder/demo/public/demos/instagram/0012.html
deleted file mode 100644
index 1c7fae120bc1e6a988fc8e3b6a889332710a55be..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0012.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0013.html b/screencoder/demo/public/demos/instagram/0013.html
deleted file mode 100644
index ded54357f54c178201ae557ddd9de1683a468a78..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0013.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0014.html b/screencoder/demo/public/demos/instagram/0014.html
deleted file mode 100644
index 083d79353b273b504a40d628cbf17a486088fa94..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0014.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0015.html b/screencoder/demo/public/demos/instagram/0015.html
deleted file mode 100644
index 715dbdfee1d99f579b3a4268712cfc82b5d8f9d1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0015.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0016.html b/screencoder/demo/public/demos/instagram/0016.html
deleted file mode 100644
index 1b45b965308074535786d5dcddeeb2abb969eb70..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0016.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0017.html b/screencoder/demo/public/demos/instagram/0017.html
deleted file mode 100644
index d9a7ee6c4f970535d9f3c2a7bf644923bc6a665f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0017.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0018.html b/screencoder/demo/public/demos/instagram/0018.html
deleted file mode 100644
index 117d5cdfee7a7660948a79a4447f1856eea22dae..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0018.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0019.html b/screencoder/demo/public/demos/instagram/0019.html
deleted file mode 100644
index 625e24d6bef4efa23fe430c44019bb69b576ba63..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0019.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0020.html b/screencoder/demo/public/demos/instagram/0020.html
deleted file mode 100644
index ff3d0a3701e8bc4de9a92e44db9da72768bcc956..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0020.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0021.html b/screencoder/demo/public/demos/instagram/0021.html
deleted file mode 100644
index b34fb446f7fe14153d7b732484bfcb390bf7dedd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0021.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0022.html b/screencoder/demo/public/demos/instagram/0022.html
deleted file mode 100644
index 447f79551ec34c078838a1d687e8355caff6842a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0022.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0023.html b/screencoder/demo/public/demos/instagram/0023.html
deleted file mode 100644
index 0e30c88ae4d7a66c90f1c460cfc9257bfd56db3b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0023.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0024.html b/screencoder/demo/public/demos/instagram/0024.html
deleted file mode 100644
index 768596021ccd62ee87d91d49cc9321918a74ac82..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0024.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0025.html b/screencoder/demo/public/demos/instagram/0025.html
deleted file mode 100644
index de4047ec6ef18d0cfd613a756fbefea8f3894e34..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0025.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0026.html b/screencoder/demo/public/demos/instagram/0026.html
deleted file mode 100644
index 4b001e44682fc62051a2cf97c9bddb0aa7d5d114..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0026.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0027.html b/screencoder/demo/public/demos/instagram/0027.html
deleted file mode 100644
index 3736c610b94a38b8e3b2db53547be27c2c437f7e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0027.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0028.html b/screencoder/demo/public/demos/instagram/0028.html
deleted file mode 100644
index 5b3c9f94631c8a002e1a5dec5c7aa3cf79eb547c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0028.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0029.html b/screencoder/demo/public/demos/instagram/0029.html
deleted file mode 100644
index fd5f925421433d7ea4959d7f31bfceae8d698ca2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0029.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0030.html b/screencoder/demo/public/demos/instagram/0030.html
deleted file mode 100644
index 414ac28459d98c14824b2a4da62861e863f3d335..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0030.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0031.html b/screencoder/demo/public/demos/instagram/0031.html
deleted file mode 100644
index 0030233ef879d5fa9fdbd568347dcd0193dc6448..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0031.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0032.html b/screencoder/demo/public/demos/instagram/0032.html
deleted file mode 100644
index 2a964ccd916ac531a976ee2d95800ca26335eedc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0032.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0033.html b/screencoder/demo/public/demos/instagram/0033.html
deleted file mode 100644
index 103a3e80a962312885d44f8ee58dd2e75c709dee..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0033.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0034.html b/screencoder/demo/public/demos/instagram/0034.html
deleted file mode 100644
index 810bf93a6b1c1f10c3a9d6d44499564aca646d06..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0034.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0035.html b/screencoder/demo/public/demos/instagram/0035.html
deleted file mode 100644
index d5bf79c72e130f2882cd82bf19255e3387b4c241..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0035.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0036.html b/screencoder/demo/public/demos/instagram/0036.html
deleted file mode 100644
index 446645ce84d78efbfcd8105786ff08e74d2926ff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0036.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0037.html b/screencoder/demo/public/demos/instagram/0037.html
deleted file mode 100644
index c04533fda8f033b7690a4523d63a79707bca5053..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0037.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0038.html b/screencoder/demo/public/demos/instagram/0038.html
deleted file mode 100644
index 3de9e99c04441d37dbd4aec151f542bbfba5801c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0038.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0039.html b/screencoder/demo/public/demos/instagram/0039.html
deleted file mode 100644
index a0d89028e49dcde4f3f675a8b76976532785d175..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0039.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0040.html b/screencoder/demo/public/demos/instagram/0040.html
deleted file mode 100644
index 38f13c58ae3ad74d4571d1c3904f70ff2de37da2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0040.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0041.html b/screencoder/demo/public/demos/instagram/0041.html
deleted file mode 100644
index a3ee818ca806de7a674d0bc141ce63a51ae4f8d0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0041.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0042.html b/screencoder/demo/public/demos/instagram/0042.html
deleted file mode 100644
index 8f681ec485ee5eea80908eaec030238531146b58..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0042.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0043.html b/screencoder/demo/public/demos/instagram/0043.html
deleted file mode 100644
index c4c8f159eea413bdbb8552b8f44a783378031410..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0043.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0044.html b/screencoder/demo/public/demos/instagram/0044.html
deleted file mode 100644
index f1f45666d6da2b94ea05b12bcc8bae2f4af826a4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0044.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0045.html b/screencoder/demo/public/demos/instagram/0045.html
deleted file mode 100644
index 53df94e5c1197cd44f8a38f022cf653672847cb8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0045.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0046.html b/screencoder/demo/public/demos/instagram/0046.html
deleted file mode 100644
index 3d057d3ac34bdc03ea4a3ab944e078d38778799c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0046.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0047.html b/screencoder/demo/public/demos/instagram/0047.html
deleted file mode 100644
index 6a62753b9b81ad0e1af679e5504c096eda80e5e0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0047.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0048.html b/screencoder/demo/public/demos/instagram/0048.html
deleted file mode 100644
index 0f0c49866639675d0c9a6d273cdb5341723d64d1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0048.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs style="opacity:0;transition:opacity .35s ease-out;">
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0049.html b/screencoder/demo/public/demos/instagram/0049.html
deleted file mode 100644
index 4f693489695a51c4e1c850c6cbe163f13393d561..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0049.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" style="opacity:0;transition:opacity .35s ease-out;" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0050.html b/screencoder/demo/public/demos/instagram/0050.html
deleted file mode 100644
index ad82cd782005d90f912e37f4ffbddb3c3e6d93c1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0050.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0051.html b/screencoder/demo/public/demos/instagram/0051.html
deleted file mode 100644
index 01ed09c69fe2987ac73e1580565b382610144b64..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0051.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646" style="opacity:0;transition:opacity .35s ease-out;">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0052.html b/screencoder/demo/public/demos/instagram/0052.html
deleted file mode 100644
index 7e887e28d062fcc0ec948e7fd2752848a8ca15c8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0052.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10" style="opacity:0;transition:opacity .35s ease-out;">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0053.html b/screencoder/demo/public/demos/instagram/0053.html
deleted file mode 100644
index 13a62997ad7dec905e2d3f39c68bd7c3c8a11155..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0053.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0054.html b/screencoder/demo/public/demos/instagram/0054.html
deleted file mode 100644
index f91a61fa05238905b67a0a2f4aa6934d4333cd5e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0054.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0055.html b/screencoder/demo/public/demos/instagram/0055.html
deleted file mode 100644
index 2c7eca2c920fa635b2ddbb81a4ce941267cda162..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0055.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0056.html b/screencoder/demo/public/demos/instagram/0056.html
deleted file mode 100644
index 3b230c8efb47532e6fff186262bebe758d08aede..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0056.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0057.html b/screencoder/demo/public/demos/instagram/0057.html
deleted file mode 100644
index 4cac694d8fe75b553fefc72c1bb71691c1b108b9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0057.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0058.html b/screencoder/demo/public/demos/instagram/0058.html
deleted file mode 100644
index 3d83cce917a368becdad6f305cb71ac641be9908..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0058.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0059.html b/screencoder/demo/public/demos/instagram/0059.html
deleted file mode 100644
index 740db4375e08101dd7cf9355b372f4c71c6cafb4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0059.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0060.html b/screencoder/demo/public/demos/instagram/0060.html
deleted file mode 100644
index 4d9a969d5504b8b927373ba4e18a184799cafc09..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0060.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0061.html b/screencoder/demo/public/demos/instagram/0061.html
deleted file mode 100644
index 2fb8d811b833cc0b3fae9f7493fc285f1d2eb5ef..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0061.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0062.html b/screencoder/demo/public/demos/instagram/0062.html
deleted file mode 100644
index 7f62c1167195eafcb93f6f225f42f476d6668e9d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0062.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0063.html b/screencoder/demo/public/demos/instagram/0063.html
deleted file mode 100644
index cad62370b29e30939f6a01b0face62c66bb6afc7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0063.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0064.html b/screencoder/demo/public/demos/instagram/0064.html
deleted file mode 100644
index 88500f72acbe827265b82afab566feea0289b3ba..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0064.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0065.html b/screencoder/demo/public/demos/instagram/0065.html
deleted file mode 100644
index 92cbac01a9b9c2c0d3304183ddfd4799dab32a7a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0065.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0066.html b/screencoder/demo/public/demos/instagram/0066.html
deleted file mode 100644
index 0d4443eb7872c99b8d7b85566111c4a7cf539645..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0066.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0067.html b/screencoder/demo/public/demos/instagram/0067.html
deleted file mode 100644
index df8f69b49946d88d5276fc259920296c0b701490..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0067.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0068.html b/screencoder/demo/public/demos/instagram/0068.html
deleted file mode 100644
index 23a1aa3f6ffbe8291e92680c3db45a80bfb43716..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0068.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0069.html b/screencoder/demo/public/demos/instagram/0069.html
deleted file mode 100644
index e79804829c10328ef19b2966dfbcc4b9df2c899d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0069.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0070.html b/screencoder/demo/public/demos/instagram/0070.html
deleted file mode 100644
index 23361fe1b43e008af4aebd391f9a4416bc6a353c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0070.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0071.html b/screencoder/demo/public/demos/instagram/0071.html
deleted file mode 100644
index 272845ae7cb8e558ccecbf599bd549ecb961f08b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0071.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0072.html b/screencoder/demo/public/demos/instagram/0072.html
deleted file mode 100644
index d687685fd57e89d213294412bab3f7564be6f085..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0072.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0073.html b/screencoder/demo/public/demos/instagram/0073.html
deleted file mode 100644
index 99dfb58a48db2b9cceeb67434a7b3c97ed82a988..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0073.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0074.html b/screencoder/demo/public/demos/instagram/0074.html
deleted file mode 100644
index adb747e2971aec47cc8293f53846bc56f68573b8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0074.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0075.html b/screencoder/demo/public/demos/instagram/0075.html
deleted file mode 100644
index 0cc3bcda38d5f89b314d09e90d555c01bac405fa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0075.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0076.html b/screencoder/demo/public/demos/instagram/0076.html
deleted file mode 100644
index 8310141b6586e3ec943112d42582931298a454e6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0076.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1" style="opacity:0;transition:opacity .35s ease-out;">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0077.html b/screencoder/demo/public/demos/instagram/0077.html
deleted file mode 100644
index 7f4dfad1ad39a3c398c7fad5c8aa8ad6f6eef8da..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0077.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600" style="opacity:0;transition:opacity .35s ease-out;">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0078.html b/screencoder/demo/public/demos/instagram/0078.html
deleted file mode 100644
index e475c3d2074c3c5c1426df33791b3d9751bfc458..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0078.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0079.html b/screencoder/demo/public/demos/instagram/0079.html
deleted file mode 100644
index 4a323291cc5367131451b7e4ed985b3278de0d66..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0079.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0080.html b/screencoder/demo/public/demos/instagram/0080.html
deleted file mode 100644
index c4b7a387927f56d4b218dfd9dddf9a9008c7b4ea..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0080.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0081.html b/screencoder/demo/public/demos/instagram/0081.html
deleted file mode 100644
index f70903fe0f89c12d6ef6adf8a98b751433424092..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0081.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0082.html b/screencoder/demo/public/demos/instagram/0082.html
deleted file mode 100644
index 128ae09b82d52a567cdca8e66526aa57c39e7f70..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0082.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0083.html b/screencoder/demo/public/demos/instagram/0083.html
deleted file mode 100644
index dcabb05084ea3c9f89a1fab6261ac58d7eac182b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0083.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0084.html b/screencoder/demo/public/demos/instagram/0084.html
deleted file mode 100644
index eab48db095c2e2e0eaa0feb432603503afbc9e69..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0084.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0085.html b/screencoder/demo/public/demos/instagram/0085.html
deleted file mode 100644
index c4ded8e26a9baa51659522af1b43bdc70f5016c0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0085.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0086.html b/screencoder/demo/public/demos/instagram/0086.html
deleted file mode 100644
index 6dab8e5a285348aef680b12e18e2cb4f0d69a24c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0086.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0087.html b/screencoder/demo/public/demos/instagram/0087.html
deleted file mode 100644
index 1c0e8dacb5a860efaf37d2ae127e0e8c2bc50327..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0087.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0088.html b/screencoder/demo/public/demos/instagram/0088.html
deleted file mode 100644
index 13188bb61d85e0fdb4ea00e946244e23ad97815d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0088.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0089.html b/screencoder/demo/public/demos/instagram/0089.html
deleted file mode 100644
index 703dce1c30d1772bd6e14923e0a813ed41e7caf3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0089.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0090.html b/screencoder/demo/public/demos/instagram/0090.html
deleted file mode 100644
index fc4e3858e035a5375a784ec6868d2df73fd13a8c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0090.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0091.html b/screencoder/demo/public/demos/instagram/0091.html
deleted file mode 100644
index 22aba535ba1db7c707962eb95bc7013b42de1cbf..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0091.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0092.html b/screencoder/demo/public/demos/instagram/0092.html
deleted file mode 100644
index c1474fc254ae54cfecabd1271dd5390b10d51378..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0092.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0093.html b/screencoder/demo/public/demos/instagram/0093.html
deleted file mode 100644
index 0740d282e9be06a4736117019b6ccb22ab3b7a8c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0093.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0094.html b/screencoder/demo/public/demos/instagram/0094.html
deleted file mode 100644
index 457e00f388f7d3474b355f8e2c0b3aed211e0ebb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0094.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0095.html b/screencoder/demo/public/demos/instagram/0095.html
deleted file mode 100644
index 5ae72e47fb0773fe53f7d1830856587a5c4a72e0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0095.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0096.html b/screencoder/demo/public/demos/instagram/0096.html
deleted file mode 100644
index 235e1935e04c361b74ec7b4214a7503582f209de..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0096.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0097.html b/screencoder/demo/public/demos/instagram/0097.html
deleted file mode 100644
index ec60aba3c19a52e5997d1d92ac32f5bf62d1566f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0097.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0098.html b/screencoder/demo/public/demos/instagram/0098.html
deleted file mode 100644
index 967c5e45bd7b75d619fe0be7a831673e340de0cc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0098.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0099.html b/screencoder/demo/public/demos/instagram/0099.html
deleted file mode 100644
index 4e2c9b85046563b8ebf584cb1cc161fd32f97843..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0099.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0100.html b/screencoder/demo/public/demos/instagram/0100.html
deleted file mode 100644
index b22f42a3f22a4a7d00dcbff18449e80308abf9de..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0100.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0101.html b/screencoder/demo/public/demos/instagram/0101.html
deleted file mode 100644
index c761af3cde687e9d85cb13215a2731e779801ea8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0101.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0102.html b/screencoder/demo/public/demos/instagram/0102.html
deleted file mode 100644
index 8687dfb57d0659890a0830dcc43145e763e1cb65..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0102.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0103.html b/screencoder/demo/public/demos/instagram/0103.html
deleted file mode 100644
index 6bcc29c29503d8c5156df4bd0bcb0ace3ae845e9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0103.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0104.html b/screencoder/demo/public/demos/instagram/0104.html
deleted file mode 100644
index a3eaa1ba608ab268274fe911a35f25206c0fb627..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0104.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0105.html b/screencoder/demo/public/demos/instagram/0105.html
deleted file mode 100644
index 5e5350a7012ec02de905576bbb738424ea772783..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0105.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0106.html b/screencoder/demo/public/demos/instagram/0106.html
deleted file mode 100644
index 44c591398b67512cff05b69ceefa2d22d34fc313..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0106.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0107.html b/screencoder/demo/public/demos/instagram/0107.html
deleted file mode 100644
index 2e5e95e3f799b3ca294cf4425254ab5c006d87fb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0107.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0108.html b/screencoder/demo/public/demos/instagram/0108.html
deleted file mode 100644
index 8eec1cc26e237c676b4038e2c12321668504d866..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0108.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0109.html b/screencoder/demo/public/demos/instagram/0109.html
deleted file mode 100644
index 70b42b0021622a23ecc1b61dba9b75c48b4bde6c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0109.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0110.html b/screencoder/demo/public/demos/instagram/0110.html
deleted file mode 100644
index d5423b43001cfa21b9253504d53e49f3ad6a73de..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0110.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0111.html b/screencoder/demo/public/demos/instagram/0111.html
deleted file mode 100644
index c9cb4949f878f0e9ba5b8e06bd46c01c2a7dbced..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0111.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0112.html b/screencoder/demo/public/demos/instagram/0112.html
deleted file mode 100644
index 90d7bba7db609f0e57a267576aa8558009a9290f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0112.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" style="opacity:0;transition:opacity .35s ease-out;" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0113.html b/screencoder/demo/public/demos/instagram/0113.html
deleted file mode 100644
index 5b23fea51513d171337af8181b0daad4ca863eaa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0113.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0114.html b/screencoder/demo/public/demos/instagram/0114.html
deleted file mode 100644
index f281b0b3fc18d866b0ff79786b912b809aa37e72..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0114.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0115.html b/screencoder/demo/public/demos/instagram/0115.html
deleted file mode 100644
index ad88847c2a0f1a3d13c9143a00c15e8145a94fdf..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0115.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0116.html b/screencoder/demo/public/demos/instagram/0116.html
deleted file mode 100644
index f0a04424bd48fd4af28a35d7653806b82ceeb6dc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0116.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0117.html b/screencoder/demo/public/demos/instagram/0117.html
deleted file mode 100644
index b46a0727b6c2d43b9d3301bf5a476baed1475bff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0117.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0118.html b/screencoder/demo/public/demos/instagram/0118.html
deleted file mode 100644
index 6bcb55abb5f4d636b57bb171fb4f75123e96cace..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0118.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0119.html b/screencoder/demo/public/demos/instagram/0119.html
deleted file mode 100644
index b1da32f5762e8aaa571f12e00e7765f6cc12410c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0119.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0120.html b/screencoder/demo/public/demos/instagram/0120.html
deleted file mode 100644
index a362bb34073bc32d5f38d1f8def0925e7c67cf0e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0120.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0121.html b/screencoder/demo/public/demos/instagram/0121.html
deleted file mode 100644
index 683753ac0f67334525c21ec7d4cdf6359df29bc3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0121.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0122.html b/screencoder/demo/public/demos/instagram/0122.html
deleted file mode 100644
index 2b6039d60963d219ca45377c48c5ca42aa7f7ce9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0122.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0123.html b/screencoder/demo/public/demos/instagram/0123.html
deleted file mode 100644
index 9fb2b0782cdba90118e0ac41b295b40048e8fccc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0123.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0124.html b/screencoder/demo/public/demos/instagram/0124.html
deleted file mode 100644
index 53169f9accbacefd3b9b770aec686e8efbb1bcfc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0124.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0125.html b/screencoder/demo/public/demos/instagram/0125.html
deleted file mode 100644
index 55d61942ffb176f887db7450d86a1fd110805045..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0125.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0126.html b/screencoder/demo/public/demos/instagram/0126.html
deleted file mode 100644
index f76729f22df8cd21ed7e75d19f278a2253272468..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0126.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0127.html b/screencoder/demo/public/demos/instagram/0127.html
deleted file mode 100644
index 01ff5eba134460c53321ac33c59b5356fe54b8f7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0127.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0128.html b/screencoder/demo/public/demos/instagram/0128.html
deleted file mode 100644
index f0cfd067c00a4f2844c71c347f678aa064e5ed91..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0128.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0129.html b/screencoder/demo/public/demos/instagram/0129.html
deleted file mode 100644
index 21d12b3558a968d570207ad9680b89848a723824..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0129.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0130.html b/screencoder/demo/public/demos/instagram/0130.html
deleted file mode 100644
index cd52fae00e7c6a0d6dc807cdf707fda646378567..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0130.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0131.html b/screencoder/demo/public/demos/instagram/0131.html
deleted file mode 100644
index 3d51410d1be14239b1dfbc65574b46a53ae6e2b2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0131.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0132.html b/screencoder/demo/public/demos/instagram/0132.html
deleted file mode 100644
index 3325cdb8ba674eb0ff392f3f9e44de5ee1815efd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0132.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0133.html b/screencoder/demo/public/demos/instagram/0133.html
deleted file mode 100644
index 8424c0a7dcb72abff4069a6a100c7991a71c03c4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0133.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0134.html b/screencoder/demo/public/demos/instagram/0134.html
deleted file mode 100644
index 4866734416f514496553e61fe69c692f5a8444c9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0134.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0135.html b/screencoder/demo/public/demos/instagram/0135.html
deleted file mode 100644
index 6ccc51e0708bf1ee6e79726ec6e748eaa705f883..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0135.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0136.html b/screencoder/demo/public/demos/instagram/0136.html
deleted file mode 100644
index 15bff3ed0d8046d4a1b93bd97bf52b99e33f1a43..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0136.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0137.html b/screencoder/demo/public/demos/instagram/0137.html
deleted file mode 100644
index 6e3390f8b3198cbb2052588a6c6b49a43aa102d8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0137.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0138.html b/screencoder/demo/public/demos/instagram/0138.html
deleted file mode 100644
index e9f1a772e4622e782a3241ee954a00be23e4fe9c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0138.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0139.html b/screencoder/demo/public/demos/instagram/0139.html
deleted file mode 100644
index cfe7203f7259aa4d1760d6ffee3e91ba5eea6921..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0139.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0140.html b/screencoder/demo/public/demos/instagram/0140.html
deleted file mode 100644
index 60a06db0f0be73e99d5a05e1087dc55d25286324..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0140.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0141.html b/screencoder/demo/public/demos/instagram/0141.html
deleted file mode 100644
index 0b12553894a4d128d97832582105242ee07f7434..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0141.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0142.html b/screencoder/demo/public/demos/instagram/0142.html
deleted file mode 100644
index e2be83e91edec8d51754ea1322e7b4f718937f2e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0142.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0143.html b/screencoder/demo/public/demos/instagram/0143.html
deleted file mode 100644
index 5b16db1ac5063865d84a983ddfa879cf26bf00f1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0143.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/0144.html b/screencoder/demo/public/demos/instagram/0144.html
deleted file mode 100644
index d6045071724f8aee8acd50b93b04d72a1dc0f970..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/0144.html
+++ /dev/null
@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-<div class="flex flex-col justify-between h-full p-4 bg-white">
-<!-- 主要导航区域 -->
-<div class="flex flex-col space-y-6">
-<div class="text-3xl font-bold">
-       Instagram
-      </div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-</path>
-</svg>
-<span>
-        首页
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-</path>
-</svg>
-<span>
-        搜索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        探索
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-</path>
-</svg>
-<span>
-        Reels
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-</path>
-</svg>
-<span>
-        消息
-       </span>
-</div>
-<div class="flex items-center space-x-4 relative">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-</path>
-</svg>
-<span>
-        通知
-       </span>
-<span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-</path>
-</svg>
-<span>
-        创建
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-<circle cx="12" cy="12" r="4">
-</circle>
-</svg>
-<span>
-        主页
-       </span>
-</div>
-</div>
-<!-- 底部导航区域 -->
-<div class="flex flex-col space-y-4">
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-</path>
-</svg>
-<span>
-        Threads
-       </span>
-</div>
-<div class="flex items-center space-x-4">
-<svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-</path>
-</svg>
-<span>
-        更多
-       </span>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-<div class="flex items-center space-x-20 p-3">
-<!-- 头像及渐变环 -->
-<div class="relative">
-<svg class="w-40 h-40" viewbox="0 0 200 200">
-<defs>
-<lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-<stop offset="0%" stop-color="#ff28a4">
-</stop>
-<stop offset="100%" stop-color="#ffb646">
-</stop>
-</lineargradient>
-</defs>
-<circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-</circle>
-</svg>
-<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-</div>
-</div>
-<!-- 右侧信息区域 -->
-<div class="flex flex-col flex-1">
-<!-- 顶部栏：用户名 + 认证 + 按钮 -->
-<div class="flex items-center space-x-2">
-<h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-<!-- 认证徽章 -->
-<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-<path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-</path>
-</svg>
-<button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-</path>
-</svg>
-</button>
-<button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-<path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-</path>
-</svg>
-</button>
-</div>
-<!-- 统计数据 -->
-<div class="mt-4 flex space-x-6">
-<div>
-<span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-<div>
-<span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-<div>
-<span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-</div>
-<!-- 名字 -->
-<div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-<!-- @用户名 -->
-<div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-<!-- 简介 -->
-<div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-<svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-<path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-</path>
-</svg>
-</div>
-<!-- 链接 -->
-<div class="mt-1 text-blue-600 flex items-center">
-<svg fill="none" height="16" stroke="#1e6fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
-<!-- 上半段链环 -->
-<path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47"></path>
-<!-- 下半段链环 -->
-<path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47"></path>
-</svg>
-       linktr.ee/mirandakerr
-      </div>
-<!-- 关注者提示 -->
-<div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-<div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-</div>
-<div class="flex flex-col items-center">
-<svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-<rect fill="gray" height="24" width="24" x="0" y="0">
-</rect>
-</svg>
-<p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-</div>
-</div>
-</div>
-<div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-<div>
-<div class="flex justify-center border-b">
-<div class="flex items-center px-4 py-3 border-b-2 border-black">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        帖子
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        REELS
-       </span>
-</div>
-<div class="flex items-center px-4 py-3 text-gray-700">
-<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-<span>
-        标记内容
-       </span>
-</div>
-</div>
-<div class="grid grid-cols-3 gap-2 mt-2">
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-<div class="relative">
-<div class="bg-gray-300 w-full h-96">
-</div>
-<div class="absolute top-2 right-2">
-<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/final_ins.html b/screencoder/demo/public/demos/instagram/final_ins.html
deleted file mode 100644
index 68ced9be16fa517ebc328b1fb04c479594159570..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/final_ins.html
+++ /dev/null
@@ -1,375 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-    <div class="flex flex-col justify-between h-full p-4 bg-white">
-     <!-- 主要导航区域 -->
-     <div class="flex flex-col space-y-6">
-      <div class="text-3xl font-bold">
-       Instagram
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-        </path>
-       </svg>
-       <span>
-        首页
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-        </path>
-       </svg>
-       <span>
-        搜索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        探索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-        </path>
-       </svg>
-       <span>
-        Reels
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-        </path>
-       </svg>
-       <span>
-        消息
-       </span>
-      </div>
-      <div class="flex items-center space-x-4 relative">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-        </path>
-       </svg>
-       <span>
-        通知
-       </span>
-       <span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-        </path>
-       </svg>
-       <span>
-        创建
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-        <circle cx="12" cy="12" r="4">
-        </circle>
-       </svg>
-       <span>
-        主页
-       </span>
-      </div>
-     </div>
-     
-     <!-- 底部导航区域 -->
-     <div class="flex flex-col space-y-4">
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        Threads
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-        </path>
-       </svg>
-       <span>
-        更多
-       </span>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-    <div class="flex items-center space-x-20 p-3">
-     <!-- 头像及渐变环 -->
-     <div class="relative">
-        <svg class="w-40 h-40" viewbox="0 0 200 200">
-         <defs>
-          <lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-           <stop offset="0%" stop-color="#ff28a4">
-           </stop>
-           <stop offset="100%" stop-color="#ffb646">
-           </stop>
-          </lineargradient>
-         </defs>
-         <circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-         </circle>
-        </svg>
-        <img src="../../assets/demo2_cropped/demo3_4.png" class="absolute top-1/2 left-1/2 w-36 h-36 object-cover rounded-full" style="transform: translate(-50%, -50%)" alt="头像" />
-       </div>
-     <!-- 右侧信息区域 -->
-     <div class="flex flex-col flex-1">
-      <!-- 顶部栏：用户名 + 认证 + 按钮 -->
-      <div class="flex items-center space-x-2">
-       <h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-       <!-- 认证徽章 -->
-       <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-        </path>
-       </svg>
-       <button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-       <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-         </path>
-        </svg>
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-         </path>
-        </svg>
-       </button>
-      </div>
-      <!-- 统计数据 -->
-      <div class="mt-4 flex space-x-6">
-       <div>
-        <span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-       <div>
-        <span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-       <div>
-        <span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-      </div>
-      <!-- 名字 -->
-      <div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-      <!-- @用户名 -->
-      <div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-      <!-- 简介 -->
-      <div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-       <svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-        </path>
-       </svg>
-      </div>
-      <!-- 链接 -->
-      <div class="mt-1 text-blue-600 flex items-center">
-        <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="16"
-        height="16"
-        stroke="#1e6fff"
-        stroke-width="2"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <!-- 上半段链环 -->
-        <path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" />
-        <!-- 下半段链环 -->
-        <path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" />
-      </svg>
-       linktr.ee/mirandakerr
-      </div>
-      <!-- 关注者提示 -->
-      <div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-    <div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_5.png" class="w-20 h-20 rounded-full object-cover" alt="KORA Glow" />
-      <p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_6.png" class="w-20 h-20 rounded-full object-cover" alt="KORA Organics" />
-      <p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_7.png" class="w-20 h-20 rounded-full object-cover" alt="Events" />
-      <p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_8.png" class="w-20 h-20 rounded-full object-cover" alt="MK Home" />
-      <p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_9.png" class="w-20 h-20 rounded-full object-cover" alt="Self-care" />
-      <p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_10.png" class="w-20 h-20 rounded-full object-cover" alt="Tutorials" />
-      <p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <img src="../../assets/demo2_cropped/demo3_11.png" class="w-22 h-20 object-cover" alt="Wellness" />
-      <p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-    <div>
-     <div class="flex justify-center border-b">
-      <div class="flex items-center px-4 py-3 border-b-2 border-black">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        帖子
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        REELS
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        标记内容
-       </span>
-      </div>
-     </div>
-     <div class="grid grid-cols-3 gap-2 mt-2">
-      <div class="relative">
-        <div class="w-full h-96 overflow-hidden">
-            <img src="../../assets/demo2_cropped/demo2_1.png" class="w-full h-full object-cover" alt="Instagram post">
-        </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-        <div class="w-full h-96 overflow-hidden">
-            <img src="../../assets/demo2_cropped/demo2_2.png" class="w-full h-full object-cover" alt="Instagram post">
-        </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-        <div class="w-full h-96 overflow-hidden">
-            <img src="../../assets/demo2_cropped/demo2_3.png" class="w-full h-full object-cover" alt="Instagram post">
-        </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/instagram/manifest.json b/screencoder/demo/public/demos/instagram/manifest.json
deleted file mode 100644
index f991f456b99ff2a80caca743ba281017c20189ed..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/manifest.json
+++ /dev/null
@@ -1,722 +0,0 @@
-[
-  {
-    "file": "0001.html",
-    "caption": "Elements: 1/144",
-    "diff": ""
-  },
-  {
-    "file": "0002.html",
-    "caption": "Elements: 2/144",
-    "diff": "--- \n+++ \n@@ -37,7 +37,7 @@\n <div class=\"box\" id=\"1\" style=\"left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;\">\n <div class=\"flex flex-col justify-between h-full p-4 bg-white\">\n <!-- 主要导航区域 -->\n-<div class=\"flex flex-col space-y-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col space-y-6\">\n <div class=\"text-3xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Instagram\n       </div>"
-  },
-  {
-    "file": "0003.html",
-    "caption": "Elements: 3/144",
-    "diff": "--- \n+++ \n@@ -38,7 +38,7 @@\n <div class=\"flex flex-col justify-between h-full p-4 bg-white\">\n <!-- 主要导航区域 -->\n <div class=\"flex flex-col space-y-6\">\n-<div class=\"text-3xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"text-3xl font-bold\">\n        Instagram\n       </div>\n <div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0004.html",
-    "caption": "Elements: 4/144",
-    "diff": "--- \n+++ \n@@ -41,7 +41,7 @@\n <div class=\"text-3xl font-bold\">\n        Instagram\n       </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0005.html",
-    "caption": "Elements: 5/144",
-    "diff": "--- \n+++ \n@@ -42,7 +42,7 @@\n        Instagram\n       </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0006.html",
-    "caption": "Elements: 6/144",
-    "diff": "--- \n+++ \n@@ -43,7 +43,7 @@\n       </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0007.html",
-    "caption": "Elements: 7/144",
-    "diff": "--- \n+++ \n@@ -46,7 +46,7 @@\n <path d=\"M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         首页\n        </span>\n </div>"
-  },
-  {
-    "file": "0008.html",
-    "caption": "Elements: 8/144",
-    "diff": "--- \n+++ \n@@ -50,7 +50,7 @@\n         首页\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0009.html",
-    "caption": "Elements: 9/144",
-    "diff": "--- \n+++ \n@@ -51,7 +51,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0010.html",
-    "caption": "Elements: 10/144",
-    "diff": "--- \n+++ \n@@ -52,7 +52,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0011.html",
-    "caption": "Elements: 11/144",
-    "diff": "--- \n+++ \n@@ -55,7 +55,7 @@\n <path d=\"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         搜索\n        </span>\n </div>"
-  },
-  {
-    "file": "0012.html",
-    "caption": "Elements: 12/144",
-    "diff": "--- \n+++ \n@@ -59,7 +59,7 @@\n         搜索\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0013.html",
-    "caption": "Elements: 13/144",
-    "diff": "--- \n+++ \n@@ -60,7 +60,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0014.html",
-    "caption": "Elements: 14/144",
-    "diff": "--- \n+++ \n@@ -61,7 +61,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0015.html",
-    "caption": "Elements: 15/144",
-    "diff": "--- \n+++ \n@@ -64,7 +64,7 @@\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         探索\n        </span>\n </div>"
-  },
-  {
-    "file": "0016.html",
-    "caption": "Elements: 16/144",
-    "diff": "--- \n+++ \n@@ -68,7 +68,7 @@\n         探索\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0017.html",
-    "caption": "Elements: 17/144",
-    "diff": "--- \n+++ \n@@ -69,7 +69,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0018.html",
-    "caption": "Elements: 18/144",
-    "diff": "--- \n+++ \n@@ -70,7 +70,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0019.html",
-    "caption": "Elements: 19/144",
-    "diff": "--- \n+++ \n@@ -73,7 +73,7 @@\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         Reels\n        </span>\n </div>"
-  },
-  {
-    "file": "0020.html",
-    "caption": "Elements: 20/144",
-    "diff": "--- \n+++ \n@@ -77,7 +77,7 @@\n         Reels\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0021.html",
-    "caption": "Elements: 21/144",
-    "diff": "--- \n+++ \n@@ -78,7 +78,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0022.html",
-    "caption": "Elements: 22/144",
-    "diff": "--- \n+++ \n@@ -79,7 +79,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0023.html",
-    "caption": "Elements: 23/144",
-    "diff": "--- \n+++ \n@@ -82,7 +82,7 @@\n <path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         消息\n        </span>\n </div>"
-  },
-  {
-    "file": "0024.html",
-    "caption": "Elements: 24/144",
-    "diff": "--- \n+++ \n@@ -86,7 +86,7 @@\n         消息\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4 relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4 relative\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0025.html",
-    "caption": "Elements: 25/144",
-    "diff": "--- \n+++ \n@@ -87,7 +87,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4 relative\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0026.html",
-    "caption": "Elements: 26/144",
-    "diff": "--- \n+++ \n@@ -88,7 +88,7 @@\n </div>\n <div class=\"flex items-center space-x-4 relative\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0027.html",
-    "caption": "Elements: 27/144",
-    "diff": "--- \n+++ \n@@ -91,7 +91,7 @@\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         通知\n        </span>\n <span class=\"absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0028.html",
-    "caption": "Elements: 28/144",
-    "diff": "--- \n+++ \n@@ -94,7 +94,7 @@\n <span>\n         通知\n        </span>\n-<span class=\"absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center\">\n         •\n        </span>\n </div>"
-  },
-  {
-    "file": "0029.html",
-    "caption": "Elements: 29/144",
-    "diff": "--- \n+++ \n@@ -98,7 +98,7 @@\n         •\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0030.html",
-    "caption": "Elements: 30/144",
-    "diff": "--- \n+++ \n@@ -99,7 +99,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0031.html",
-    "caption": "Elements: 31/144",
-    "diff": "--- \n+++ \n@@ -100,7 +100,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0032.html",
-    "caption": "Elements: 32/144",
-    "diff": "--- \n+++ \n@@ -103,7 +103,7 @@\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         创建\n        </span>\n </div>"
-  },
-  {
-    "file": "0033.html",
-    "caption": "Elements: 33/144",
-    "diff": "--- \n+++ \n@@ -107,7 +107,7 @@\n         创建\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </circle>"
-  },
-  {
-    "file": "0034.html",
-    "caption": "Elements: 34/144",
-    "diff": "--- \n+++ \n@@ -108,7 +108,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-gray-500\" viewbox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </circle>\n </svg>"
-  },
-  {
-    "file": "0035.html",
-    "caption": "Elements: 35/144",
-    "diff": "--- \n+++ \n@@ -109,7 +109,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-gray-500\" viewbox=\"0 0 24 24\">\n-<circle cx=\"12\" cy=\"12\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<circle cx=\"12\" cy=\"12\" r=\"4\">\n </circle>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0036.html",
-    "caption": "Elements: 36/144",
-    "diff": "--- \n+++ \n@@ -112,7 +112,7 @@\n <circle cx=\"12\" cy=\"12\" r=\"4\">\n </circle>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         主页\n        </span>\n </div>"
-  },
-  {
-    "file": "0037.html",
-    "caption": "Elements: 37/144",
-    "diff": "--- \n+++ \n@@ -118,7 +118,7 @@\n </div>\n </div>\n <!-- 底部导航区域 -->\n-<div class=\"flex flex-col space-y-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col space-y-4\">\n <div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0038.html",
-    "caption": "Elements: 38/144",
-    "diff": "--- \n+++ \n@@ -119,7 +119,7 @@\n </div>\n <!-- 底部导航区域 -->\n <div class=\"flex flex-col space-y-4\">\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0039.html",
-    "caption": "Elements: 39/144",
-    "diff": "--- \n+++ \n@@ -120,7 +120,7 @@\n <!-- 底部导航区域 -->\n <div class=\"flex flex-col space-y-4\">\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0040.html",
-    "caption": "Elements: 40/144",
-    "diff": "--- \n+++ \n@@ -121,7 +121,7 @@\n <div class=\"flex flex-col space-y-4\">\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0041.html",
-    "caption": "Elements: 41/144",
-    "diff": "--- \n+++ \n@@ -124,7 +124,7 @@\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         Threads\n        </span>\n </div>"
-  },
-  {
-    "file": "0042.html",
-    "caption": "Elements: 42/144",
-    "diff": "--- \n+++ \n@@ -128,7 +128,7 @@\n         Threads\n        </span>\n </div>\n-<div class=\"flex items-center space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0043.html",
-    "caption": "Elements: 43/144",
-    "diff": "--- \n+++ \n@@ -129,7 +129,7 @@\n        </span>\n </div>\n <div class=\"flex items-center space-x-4\">\n-<svg class=\"w-6 h-6 fill-black\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0044.html",
-    "caption": "Elements: 44/144",
-    "diff": "--- \n+++ \n@@ -130,7 +130,7 @@\n </div>\n <div class=\"flex items-center space-x-4\">\n <svg class=\"w-6 h-6 fill-black\" viewbox=\"0 0 24 24\">\n-<path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0045.html",
-    "caption": "Elements: 45/144",
-    "diff": "--- \n+++ \n@@ -133,7 +133,7 @@\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         更多\n        </span>\n </div>"
-  },
-  {
-    "file": "0046.html",
-    "caption": "Elements: 46/144",
-    "diff": "--- \n+++ \n@@ -141,7 +141,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"2\" style=\"left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;\">\n-<div class=\"flex items-center space-x-20 p-3\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-20 p-3\">\n <!-- 头像及渐变环 -->\n <div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-40 h-40\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 200 200\">"
-  },
-  {
-    "file": "0047.html",
-    "caption": "Elements: 47/144",
-    "diff": "--- \n+++ \n@@ -143,7 +143,7 @@\n <div class=\"box\" id=\"2\" style=\"left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;\">\n <div class=\"flex items-center space-x-20 p-3\">\n <!-- 头像及渐变环 -->\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative\">\n <svg class=\"w-40 h-40\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 200 200\">\n <defs style=\"opacity:0;transition:opacity .35s ease-out;\">\n <lineargradient id=\"avatar-gradient\" style=\"opacity:0;transition:opacity .35s ease-out;\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">"
-  },
-  {
-    "file": "0048.html",
-    "caption": "Elements: 48/144",
-    "diff": "--- \n+++ \n@@ -144,7 +144,7 @@\n <div class=\"flex items-center space-x-20 p-3\">\n <!-- 头像及渐变环 -->\n <div class=\"relative\">\n-<svg class=\"w-40 h-40\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 200 200\">\n+<svg class=\"w-40 h-40\" viewbox=\"0 0 200 200\">\n <defs style=\"opacity:0;transition:opacity .35s ease-out;\">\n <lineargradient id=\"avatar-gradient\" style=\"opacity:0;transition:opacity .35s ease-out;\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ff28a4\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0049.html",
-    "caption": "Elements: 49/144",
-    "diff": "--- \n+++ \n@@ -145,7 +145,7 @@\n <!-- 头像及渐变环 -->\n <div class=\"relative\">\n <svg class=\"w-40 h-40\" viewbox=\"0 0 200 200\">\n-<defs style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<defs>\n <lineargradient id=\"avatar-gradient\" style=\"opacity:0;transition:opacity .35s ease-out;\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ff28a4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </stop>"
-  },
-  {
-    "file": "0050.html",
-    "caption": "Elements: 50/144",
-    "diff": "--- \n+++ \n@@ -146,7 +146,7 @@\n <div class=\"relative\">\n <svg class=\"w-40 h-40\" viewbox=\"0 0 200 200\">\n <defs>\n-<lineargradient id=\"avatar-gradient\" style=\"opacity:0;transition:opacity .35s ease-out;\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n+<lineargradient id=\"avatar-gradient\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ff28a4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </stop>\n <stop offset=\"100%\" stop-color=\"#ffb646\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0051.html",
-    "caption": "Elements: 51/144",
-    "diff": "--- \n+++ \n@@ -147,7 +147,7 @@\n <svg class=\"w-40 h-40\" viewbox=\"0 0 200 200\">\n <defs>\n <lineargradient id=\"avatar-gradient\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n-<stop offset=\"0%\" stop-color=\"#ff28a4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<stop offset=\"0%\" stop-color=\"#ff28a4\">\n </stop>\n <stop offset=\"100%\" stop-color=\"#ffb646\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </stop>"
-  },
-  {
-    "file": "0052.html",
-    "caption": "Elements: 52/144",
-    "diff": "--- \n+++ \n@@ -149,7 +149,7 @@\n <lineargradient id=\"avatar-gradient\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ff28a4\">\n </stop>\n-<stop offset=\"100%\" stop-color=\"#ffb646\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<stop offset=\"100%\" stop-color=\"#ffb646\">\n </stop>\n </lineargradient>\n </defs>"
-  },
-  {
-    "file": "0053.html",
-    "caption": "Elements: 53/144",
-    "diff": "--- \n+++ \n@@ -153,7 +153,7 @@\n </stop>\n </lineargradient>\n </defs>\n-<circle cx=\"100\" cy=\"100\" fill=\"transparent\" r=\"90\" stroke=\"url(#avatar-gradient)\" stroke-width=\"10\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<circle cx=\"100\" cy=\"100\" fill=\"transparent\" r=\"90\" stroke=\"url(#avatar-gradient)\" stroke-width=\"10\">\n </circle>\n </svg>\n <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0054.html",
-    "caption": "Elements: 54/144",
-    "diff": "--- \n+++ \n@@ -156,7 +156,7 @@\n <circle cx=\"100\" cy=\"100\" fill=\"transparent\" r=\"90\" stroke=\"url(#avatar-gradient)\" stroke-width=\"10\">\n </circle>\n </svg>\n-<div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full\">\n </div>\n </div>\n <!-- 右侧信息区域 -->"
-  },
-  {
-    "file": "0055.html",
-    "caption": "Elements: 55/144",
-    "diff": "--- \n+++ \n@@ -160,7 +160,7 @@\n </div>\n </div>\n <!-- 右侧信息区域 -->\n-<div class=\"flex flex-col flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col flex-1\">\n <!-- 顶部栏：用户名 + 认证 + 按钮 -->\n <div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h1 class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0056.html",
-    "caption": "Elements: 56/144",
-    "diff": "--- \n+++ \n@@ -162,7 +162,7 @@\n <!-- 右侧信息区域 -->\n <div class=\"flex flex-col flex-1\">\n <!-- 顶部栏：用户名 + 认证 + 按钮 -->\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <h1 class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n         mirandakerr\n        </h1>"
-  },
-  {
-    "file": "0057.html",
-    "caption": "Elements: 57/144",
-    "diff": "--- \n+++ \n@@ -163,7 +163,7 @@\n <div class=\"flex flex-col flex-1\">\n <!-- 顶部栏：用户名 + 认证 + 按钮 -->\n <div class=\"flex items-center space-x-2\">\n-<h1 class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h1 class=\"text-xl font-bold\">\n         mirandakerr\n        </h1>\n <!-- 认证徽章 -->"
-  },
-  {
-    "file": "0058.html",
-    "caption": "Elements: 58/144",
-    "diff": "--- \n+++ \n@@ -167,7 +167,7 @@\n         mirandakerr\n        </h1>\n <!-- 认证徽章 -->\n-<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n+<svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path d=\"M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0059.html",
-    "caption": "Elements: 59/144",
-    "diff": "--- \n+++ \n@@ -168,7 +168,7 @@\n        </h1>\n <!-- 认证徽章 -->\n <svg class=\"w-5 h-5 text-blue-600\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n-<path d=\"M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z\">\n </path>\n </svg>\n <button class=\"px-4 py-2 bg-blue-600 text-white rounded font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0060.html",
-    "caption": "Elements: 60/144",
-    "diff": "--- \n+++ \n@@ -171,7 +171,7 @@\n <path d=\"M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z\">\n </path>\n </svg>\n-<button class=\"px-4 py-2 bg-blue-600 text-white rounded font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"px-4 py-2 bg-blue-600 text-white rounded font-medium\">\n         关注\n        </button>\n <button class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0061.html",
-    "caption": "Elements: 61/144",
-    "diff": "--- \n+++ \n@@ -174,7 +174,7 @@\n <button class=\"px-4 py-2 bg-blue-600 text-white rounded font-medium\">\n         关注\n        </button>\n-<button class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium\">\n         发消息\n        </button>\n <button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0062.html",
-    "caption": "Elements: 62/144",
-    "diff": "--- \n+++ \n@@ -177,7 +177,7 @@\n <button class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium\">\n         发消息\n        </button>\n-<button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n <path d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0063.html",
-    "caption": "Elements: 63/144",
-    "diff": "--- \n+++ \n@@ -178,7 +178,7 @@\n         发消息\n        </button>\n <button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n-<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n+<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0064.html",
-    "caption": "Elements: 64/144",
-    "diff": "--- \n+++ \n@@ -179,7 +179,7 @@\n        </button>\n <button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n-<path d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\">\n </path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0065.html",
-    "caption": "Elements: 65/144",
-    "diff": "--- \n+++ \n@@ -183,7 +183,7 @@\n </path>\n </svg>\n </button>\n-<button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n <path d=\"M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0066.html",
-    "caption": "Elements: 66/144",
-    "diff": "--- \n+++ \n@@ -184,7 +184,7 @@\n </svg>\n </button>\n <button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n-<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n+<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path d=\"M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0067.html",
-    "caption": "Elements: 67/144",
-    "diff": "--- \n+++ \n@@ -185,7 +185,7 @@\n </button>\n <button class=\"flex items-center justify-center w-8 h-8 bg-gray-200 rounded\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n-<path d=\"M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z\">\n </path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0068.html",
-    "caption": "Elements: 68/144",
-    "diff": "--- \n+++ \n@@ -191,7 +191,7 @@\n </button>\n </div>\n <!-- 统计数据 -->\n-<div class=\"mt-4 flex space-x-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-4 flex space-x-6\">\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          3206"
-  },
-  {
-    "file": "0069.html",
-    "caption": "Elements: 69/144",
-    "diff": "--- \n+++ \n@@ -192,7 +192,7 @@\n </div>\n <!-- 统计数据 -->\n <div class=\"mt-4 flex space-x-6\">\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          3206\n         </span>"
-  },
-  {
-    "file": "0070.html",
-    "caption": "Elements: 70/144",
-    "diff": "--- \n+++ \n@@ -193,7 +193,7 @@\n <!-- 统计数据 -->\n <div class=\"mt-4 flex space-x-6\">\n <div>\n-<span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-bold\">\n          3206\n         </span>\n         帖子"
-  },
-  {
-    "file": "0071.html",
-    "caption": "Elements: 71/144",
-    "diff": "--- \n+++ \n@@ -198,7 +198,7 @@\n         </span>\n         帖子\n        </div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          1438万\n         </span>"
-  },
-  {
-    "file": "0072.html",
-    "caption": "Elements: 72/144",
-    "diff": "--- \n+++ \n@@ -199,7 +199,7 @@\n         帖子\n        </div>\n <div>\n-<span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-bold\">\n          1438万\n         </span>\n         粉丝"
-  },
-  {
-    "file": "0073.html",
-    "caption": "Elements: 73/144",
-    "diff": "--- \n+++ \n@@ -204,7 +204,7 @@\n         </span>\n         粉丝\n        </div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          7496\n         </span>"
-  },
-  {
-    "file": "0074.html",
-    "caption": "Elements: 74/144",
-    "diff": "--- \n+++ \n@@ -205,7 +205,7 @@\n         粉丝\n        </div>\n <div>\n-<span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"font-bold\">\n          7496\n         </span>\n         关注"
-  },
-  {
-    "file": "0075.html",
-    "caption": "Elements: 75/144",
-    "diff": "--- \n+++ \n@@ -212,7 +212,7 @@\n        </div>\n </div>\n <!-- 名字 -->\n-<div class=\"mt-2 text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-2 text-lg font-semibold\">\n        Miranda Kerr\n       </div>\n <!-- @用户名 -->"
-  },
-  {
-    "file": "0076.html",
-    "caption": "Elements: 76/144",
-    "diff": "--- \n+++ \n@@ -216,7 +216,7 @@\n        Miranda Kerr\n       </div>\n <!-- @用户名 -->\n-<div class=\"mt-1 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-1 text-gray-600\">\n        @mirandakerr\n       </div>\n <!-- 简介 -->"
-  },
-  {
-    "file": "0077.html",
-    "caption": "Elements: 77/144",
-    "diff": "--- \n+++ \n@@ -220,7 +220,7 @@\n        @mirandakerr\n       </div>\n <!-- 简介 -->\n-<div class=\"mt-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-1\">\n        Founder &amp; CEO of\n        <span class=\"text-blue-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n         @koraorganics"
-  },
-  {
-    "file": "0078.html",
-    "caption": "Elements: 78/144",
-    "diff": "--- \n+++ \n@@ -222,7 +222,7 @@\n <!-- 简介 -->\n <div class=\"mt-1\">\n        Founder &amp; CEO of\n-       <span class=\"text-blue-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+       <span class=\"text-blue-600\">\n         @koraorganics\n        </span>\n <svg class=\"inline w-4 h-4 text-yellow-300\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">"
-  },
-  {
-    "file": "0079.html",
-    "caption": "Elements: 79/144",
-    "diff": "--- \n+++ \n@@ -225,7 +225,7 @@\n        <span class=\"text-blue-600\">\n         @koraorganics\n        </span>\n-<svg class=\"inline w-4 h-4 text-yellow-300\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 20 20\">\n+<svg class=\"inline w-4 h-4 text-yellow-300\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n <path d=\"M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0080.html",
-    "caption": "Elements: 80/144",
-    "diff": "--- \n+++ \n@@ -226,7 +226,7 @@\n         @koraorganics\n        </span>\n <svg class=\"inline w-4 h-4 text-yellow-300\" fill=\"currentColor\" viewbox=\"0 0 20 20\">\n-<path d=\"M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z\">\n </path>\n </svg>\n </div>"
-  },
-  {
-    "file": "0081.html",
-    "caption": "Elements: 81/144",
-    "diff": "--- \n+++ \n@@ -231,7 +231,7 @@\n </svg>\n </div>\n <!-- 链接 -->\n-<div class=\"mt-1 text-blue-600 flex items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-1 text-blue-600 flex items-center\">\n <svg fill=\"none\" height=\"16\" stroke=\"#1e6fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- 上半段链环 -->\n <path d=\"M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0082.html",
-    "caption": "Elements: 82/144",
-    "diff": "--- \n+++ \n@@ -232,7 +232,7 @@\n </div>\n <!-- 链接 -->\n <div class=\"mt-1 text-blue-600 flex items-center\">\n-<svg fill=\"none\" height=\"16\" stroke=\"#1e6fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg fill=\"none\" height=\"16\" stroke=\"#1e6fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- 上半段链环 -->\n <path d=\"M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <!-- 下半段链环 -->"
-  },
-  {
-    "file": "0083.html",
-    "caption": "Elements: 83/144",
-    "diff": "--- \n+++ \n@@ -234,7 +234,7 @@\n <div class=\"mt-1 text-blue-600 flex items-center\">\n <svg fill=\"none\" height=\"16\" stroke=\"#1e6fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- 上半段链环 -->\n-<path d=\"M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47\"></path>\n <!-- 下半段链环 -->\n <path d=\"M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0084.html",
-    "caption": "Elements: 84/144",
-    "diff": "--- \n+++ \n@@ -236,7 +236,7 @@\n <!-- 上半段链环 -->\n <path d=\"M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47\"></path>\n <!-- 下半段链环 -->\n-<path d=\"M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47\"></path>\n </svg>\n        linktr.ee/mirandakerr\n       </div>"
-  },
-  {
-    "file": "0085.html",
-    "caption": "Elements: 85/144",
-    "diff": "--- \n+++ \n@@ -241,7 +241,7 @@\n        linktr.ee/mirandakerr\n       </div>\n <!-- 关注者提示 -->\n-<div class=\"mt-2 text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-2 text-gray-600\">\n        cristiano关注了\n       </div>\n </div>"
-  },
-  {
-    "file": "0086.html",
-    "caption": "Elements: 86/144",
-    "diff": "--- \n+++ \n@@ -248,7 +248,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"3\" style=\"left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;\">\n-<div class=\"flex items-center space-x-4 overflow-x-auto px-4 py-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-4 overflow-x-auto px-4 py-2\">\n <div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">"
-  },
-  {
-    "file": "0087.html",
-    "caption": "Elements: 87/144",
-    "diff": "--- \n+++ \n@@ -249,7 +249,7 @@\n </div>\n <div class=\"box\" id=\"3\" style=\"left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;\">\n <div class=\"flex items-center space-x-4 overflow-x-auto px-4 py-2\">\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0088.html",
-    "caption": "Elements: 88/144",
-    "diff": "--- \n+++ \n@@ -250,7 +250,7 @@\n <div class=\"box\" id=\"3\" style=\"left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;\">\n <div class=\"flex items-center space-x-4 overflow-x-auto px-4 py-2\">\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0089.html",
-    "caption": "Elements: 89/144",
-    "diff": "--- \n+++ \n@@ -251,7 +251,7 @@\n <div class=\"flex items-center space-x-4 overflow-x-auto px-4 py-2\">\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0090.html",
-    "caption": "Elements: 90/144",
-    "diff": "--- \n+++ \n@@ -254,7 +254,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        KORA Glow\n       </p>\n </div>"
-  },
-  {
-    "file": "0091.html",
-    "caption": "Elements: 91/144",
-    "diff": "--- \n+++ \n@@ -258,7 +258,7 @@\n        KORA Glow\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0092.html",
-    "caption": "Elements: 92/144",
-    "diff": "--- \n+++ \n@@ -259,7 +259,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0093.html",
-    "caption": "Elements: 93/144",
-    "diff": "--- \n+++ \n@@ -260,7 +260,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0094.html",
-    "caption": "Elements: 94/144",
-    "diff": "--- \n+++ \n@@ -263,7 +263,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        KORA Orga...\n       </p>\n </div>"
-  },
-  {
-    "file": "0095.html",
-    "caption": "Elements: 95/144",
-    "diff": "--- \n+++ \n@@ -267,7 +267,7 @@\n        KORA Orga...\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0096.html",
-    "caption": "Elements: 96/144",
-    "diff": "--- \n+++ \n@@ -268,7 +268,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0097.html",
-    "caption": "Elements: 97/144",
-    "diff": "--- \n+++ \n@@ -269,7 +269,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0098.html",
-    "caption": "Elements: 98/144",
-    "diff": "--- \n+++ \n@@ -272,7 +272,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        Events\n       </p>\n </div>"
-  },
-  {
-    "file": "0099.html",
-    "caption": "Elements: 99/144",
-    "diff": "--- \n+++ \n@@ -276,7 +276,7 @@\n        Events\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0100.html",
-    "caption": "Elements: 100/144",
-    "diff": "--- \n+++ \n@@ -277,7 +277,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0101.html",
-    "caption": "Elements: 101/144",
-    "diff": "--- \n+++ \n@@ -278,7 +278,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0102.html",
-    "caption": "Elements: 102/144",
-    "diff": "--- \n+++ \n@@ -281,7 +281,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        MK Home\n       </p>\n </div>"
-  },
-  {
-    "file": "0103.html",
-    "caption": "Elements: 103/144",
-    "diff": "--- \n+++ \n@@ -285,7 +285,7 @@\n        MK Home\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0104.html",
-    "caption": "Elements: 104/144",
-    "diff": "--- \n+++ \n@@ -286,7 +286,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0105.html",
-    "caption": "Elements: 105/144",
-    "diff": "--- \n+++ \n@@ -287,7 +287,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0106.html",
-    "caption": "Elements: 106/144",
-    "diff": "--- \n+++ \n@@ -290,7 +290,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        Self-care\n       </p>\n </div>"
-  },
-  {
-    "file": "0107.html",
-    "caption": "Elements: 107/144",
-    "diff": "--- \n+++ \n@@ -294,7 +294,7 @@\n        Self-care\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0108.html",
-    "caption": "Elements: 108/144",
-    "diff": "--- \n+++ \n@@ -295,7 +295,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0109.html",
-    "caption": "Elements: 109/144",
-    "diff": "--- \n+++ \n@@ -296,7 +296,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0110.html",
-    "caption": "Elements: 110/144",
-    "diff": "--- \n+++ \n@@ -299,7 +299,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        Tutorials\n       </p>\n </div>"
-  },
-  {
-    "file": "0111.html",
-    "caption": "Elements: 111/144",
-    "diff": "--- \n+++ \n@@ -303,7 +303,7 @@\n        Tutorials\n       </p>\n </div>\n-<div class=\"flex flex-col items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>"
-  },
-  {
-    "file": "0112.html",
-    "caption": "Elements: 112/144",
-    "diff": "--- \n+++ \n@@ -304,7 +304,7 @@\n       </p>\n </div>\n <div class=\"flex flex-col items-center\">\n-<svg class=\"w-20 h-20 rounded-full bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n <rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>"
-  },
-  {
-    "file": "0113.html",
-    "caption": "Elements: 113/144",
-    "diff": "--- \n+++ \n@@ -305,7 +305,7 @@\n </div>\n <div class=\"flex flex-col items-center\">\n <svg class=\"w-20 h-20 rounded-full bg-gray-300\" viewbox=\"0 0 24 24\">\n-<rect fill=\"gray\" height=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"24\" x=\"0\" y=\"0\">\n+<rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n <p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0114.html",
-    "caption": "Elements: 114/144",
-    "diff": "--- \n+++ \n@@ -308,7 +308,7 @@\n <rect fill=\"gray\" height=\"24\" width=\"24\" x=\"0\" y=\"0\">\n </rect>\n </svg>\n-<p class=\"mt-1 text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"mt-1 text-sm font-medium\">\n        Wellness W...\n       </p>\n </div>"
-  },
-  {
-    "file": "0115.html",
-    "caption": "Elements: 115/144",
-    "diff": "--- \n+++ \n@@ -315,7 +315,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;\">\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <div class=\"flex justify-center border-b\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"flex items-center px-4 py-3 border-b-2 border-black\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">"
-  },
-  {
-    "file": "0116.html",
-    "caption": "Elements: 116/144",
-    "diff": "--- \n+++ \n@@ -316,7 +316,7 @@\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;\">\n <div>\n-<div class=\"flex justify-center border-b\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex justify-center border-b\">\n <div class=\"flex items-center px-4 py-3 border-b-2 border-black\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0117.html",
-    "caption": "Elements: 117/144",
-    "diff": "--- \n+++ \n@@ -317,7 +317,7 @@\n <div class=\"box\" id=\"4\" style=\"left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;\">\n <div>\n <div class=\"flex justify-center border-b\">\n-<div class=\"flex items-center px-4 py-3 border-b-2 border-black\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center px-4 py-3 border-b-2 border-black\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0118.html",
-    "caption": "Elements: 118/144",
-    "diff": "--- \n+++ \n@@ -318,7 +318,7 @@\n <div>\n <div class=\"flex justify-center border-b\">\n <div class=\"flex items-center px-4 py-3 border-b-2 border-black\">\n-<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0119.html",
-    "caption": "Elements: 119/144",
-    "diff": "--- \n+++ \n@@ -319,7 +319,7 @@\n <div class=\"flex justify-center border-b\">\n <div class=\"flex items-center px-4 py-3 border-b-2 border-black\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0120.html",
-    "caption": "Elements: 120/144",
-    "diff": "--- \n+++ \n@@ -322,7 +322,7 @@\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         帖子\n        </span>\n </div>"
-  },
-  {
-    "file": "0121.html",
-    "caption": "Elements: 121/144",
-    "diff": "--- \n+++ \n@@ -326,7 +326,7 @@\n         帖子\n        </span>\n </div>\n-<div class=\"flex items-center px-4 py-3 text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center px-4 py-3 text-gray-700\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0122.html",
-    "caption": "Elements: 122/144",
-    "diff": "--- \n+++ \n@@ -327,7 +327,7 @@\n        </span>\n </div>\n <div class=\"flex items-center px-4 py-3 text-gray-700\">\n-<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0123.html",
-    "caption": "Elements: 123/144",
-    "diff": "--- \n+++ \n@@ -328,7 +328,7 @@\n </div>\n <div class=\"flex items-center px-4 py-3 text-gray-700\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0124.html",
-    "caption": "Elements: 124/144",
-    "diff": "--- \n+++ \n@@ -331,7 +331,7 @@\n <path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         REELS\n        </span>\n </div>"
-  },
-  {
-    "file": "0125.html",
-    "caption": "Elements: 125/144",
-    "diff": "--- \n+++ \n@@ -335,7 +335,7 @@\n         REELS\n        </span>\n </div>\n-<div class=\"flex items-center px-4 py-3 text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center px-4 py-3 text-gray-700\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0126.html",
-    "caption": "Elements: 126/144",
-    "diff": "--- \n+++ \n@@ -336,7 +336,7 @@\n        </span>\n </div>\n <div class=\"flex items-center px-4 py-3 text-gray-700\">\n-<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0127.html",
-    "caption": "Elements: 127/144",
-    "diff": "--- \n+++ \n@@ -337,7 +337,7 @@\n </div>\n <div class=\"flex items-center px-4 py-3 text-gray-700\">\n <svg class=\"w-5 h-5 mr-1\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0128.html",
-    "caption": "Elements: 128/144",
-    "diff": "--- \n+++ \n@@ -340,7 +340,7 @@\n <path d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n         标记内容\n        </span>\n </div>"
-  },
-  {
-    "file": "0129.html",
-    "caption": "Elements: 129/144",
-    "diff": "--- \n+++ \n@@ -345,7 +345,7 @@\n        </span>\n </div>\n </div>\n-<div class=\"grid grid-cols-3 gap-2 mt-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"grid grid-cols-3 gap-2 mt-2\">\n <div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0130.html",
-    "caption": "Elements: 130/144",
-    "diff": "--- \n+++ \n@@ -346,7 +346,7 @@\n </div>\n </div>\n <div class=\"grid grid-cols-3 gap-2 mt-2\">\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0131.html",
-    "caption": "Elements: 131/144",
-    "diff": "--- \n+++ \n@@ -347,7 +347,7 @@\n </div>\n <div class=\"grid grid-cols-3 gap-2 mt-2\">\n <div class=\"relative\">\n-<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">"
-  },
-  {
-    "file": "0132.html",
-    "caption": "Elements: 132/144",
-    "diff": "--- \n+++ \n@@ -349,6 +349,26 @@\n <div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n+<div class=\"absolute top-2 right-2\">\n+<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+</path>\n+</svg>\n+</div>\n+</div>\n+<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+</div>\n+<div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+</path>\n+</svg>\n+</div>\n+</div>\n+<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+</div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n@@ -356,26 +376,6 @@\n </svg>\n </div>\n </div>\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-</div>\n-<div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-</path>\n-</svg>\n-</div>\n-</div>\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-</div>\n-<div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n-</path>\n-</svg>\n-</div>\n-</div>\n </div>\n </div>\n </div>"
-  },
-  {
-    "file": "0133.html",
-    "caption": "Elements: 133/144",
-    "diff": "--- \n+++ \n@@ -350,7 +350,7 @@\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\">\n-<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0134.html",
-    "caption": "Elements: 134/144",
-    "diff": "--- \n+++ \n@@ -351,7 +351,7 @@\n </div>\n <div class=\"absolute top-2 right-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n </div>"
-  },
-  {
-    "file": "0135.html",
-    "caption": "Elements: 135/144",
-    "diff": "--- \n+++ \n@@ -356,7 +356,7 @@\n </svg>\n </div>\n </div>\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0136.html",
-    "caption": "Elements: 136/144",
-    "diff": "--- \n+++ \n@@ -357,7 +357,7 @@\n </div>\n </div>\n <div class=\"relative\">\n-<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">"
-  },
-  {
-    "file": "0137.html",
-    "caption": "Elements: 137/144",
-    "diff": "--- \n+++ \n@@ -359,7 +359,7 @@\n <div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n-<div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"absolute top-2 right-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0138.html",
-    "caption": "Elements: 138/144",
-    "diff": "--- \n+++ \n@@ -360,7 +360,7 @@\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\">\n-<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0139.html",
-    "caption": "Elements: 139/144",
-    "diff": "--- \n+++ \n@@ -361,7 +361,7 @@\n </div>\n <div class=\"absolute top-2 right-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n </div>"
-  },
-  {
-    "file": "0140.html",
-    "caption": "Elements: 140/144",
-    "diff": "--- \n+++ \n@@ -366,7 +366,7 @@\n </svg>\n </div>\n </div>\n-<div class=\"relative\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0141.html",
-    "caption": "Elements: 141/144",
-    "diff": "--- \n+++ \n@@ -367,7 +367,7 @@\n </div>\n </div>\n <div class=\"relative\">\n-<div class=\"bg-gray-300 w-full h-96\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">"
-  },
-  {
-    "file": "0142.html",
-    "caption": "Elements: 142/144",
-    "diff": "--- \n+++ \n@@ -369,7 +369,7 @@\n <div class=\"relative\">\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n-<div class=\"absolute top-2 right-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"absolute top-2 right-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0143.html",
-    "caption": "Elements: 143/144",
-    "diff": "--- \n+++ \n@@ -370,7 +370,7 @@\n <div class=\"bg-gray-300 w-full h-96\">\n </div>\n <div class=\"absolute top-2 right-2\">\n-<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0144.html",
-    "caption": "Elements: 144/144",
-    "diff": "--- \n+++ \n@@ -371,7 +371,7 @@\n </div>\n <div class=\"absolute top-2 right-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n </div>"
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/demos/instagram/original_ins.html b/screencoder/demo/public/demos/instagram/original_ins.html
deleted file mode 100644
index 28214167581d2f6c2a18ab40249a84b30c5a8eff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/instagram/original_ins.html
+++ /dev/null
@@ -1,394 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 0.4905395935529082%; top: 0.1770956316410862%; width: 18%; height: 98.99645808736717%;">
-    <div class="flex flex-col justify-between h-full p-4 bg-white">
-     <!-- 主要导航区域 -->
-     <div class="flex flex-col space-y-6">
-      <div class="text-3xl font-bold">
-       Instagram
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2L2 9h3v12h14v-12h3L12 2zm0 14H7v-7h10v7zm0-9H7V6h10v1z">
-        </path>
-       </svg>
-       <span>
-        首页
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-.24-1.02-.37-1.61-.37-1.4 0-2.5.99-2.89 2.34h-3v-2h3c.03-.89.46-1.75 1.23-2.33C11.99 3.5 13.1 3 14.5 3c1.65 0 3 1.35 3 3s-1.35 3-3 3c-.59 0-1.14-.13-1.61-.37a6.5 6.5 0 0 0-1.48 5.34l-.28.27v.79l5 4.99L15.5 14z">
-        </path>
-       </svg>
-       <span>
-        搜索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.96.64-3.78 1.74-5.21L7.4 10.8a7.97 7.97 0 0 1 2.6 0l1.66-1.66C15.36 8.22 16 10.04 16 12c0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        探索
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.57.46-3.08 1.28-4.32l1.44 1.44C7.9 12.5 7 14.2 7 16c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.8-.9-3.5-2.28-4.44l1.44-1.44C19.54 8.92 20 10.43 20 12c0 4.41-3.59 8-8 8zm3-8H9v-2h6v2z">
-        </path>
-       </svg>
-       <span>
-        Reels
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z">
-        </path>
-       </svg>
-       <span>
-        消息
-       </span>
-      </div>
-      <div class="flex items-center space-x-4 relative">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35zm-2.25-5.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm4.5 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z">
-        </path>
-       </svg>
-       <span>
-        通知
-       </span>
-       <span class="absolute top-0 right-[-8px] bg-red-500 text-white text-xs rounded-full h-3 w-3 flex items-center justify-center">
-        •
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
-        </path>
-       </svg>
-       <span>
-        创建
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-gray-500" viewbox="0 0 24 24">
-        <circle cx="12" cy="12" r="4">
-        </circle>
-       </svg>
-       <span>
-        主页
-       </span>
-      </div>
-     </div>
-     
-     <!-- 底部导航区域 -->
-     <div class="flex flex-col space-y-4">
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-1.8.6-3.5 1.5-4.9C7.5 6.6 9.2 6 11 6c1.8 0 3.5.6 4.9 1.1 1.3 1.4 2.1 3.1 2.1 4.9 0 4.41-3.59 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
-        </path>
-       </svg>
-       <span>
-        Threads
-       </span>
-      </div>
-      <div class="flex items-center space-x-4">
-       <svg class="w-6 h-6 fill-black" viewbox="0 0 24 24">
-        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
-        </path>
-       </svg>
-       <span>
-        更多
-       </span>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 25%; top: 0.1770956316410862%; width: 75%; height: 30.047225501770956%;">
-    <div class="flex items-center space-x-20 p-3">
-     <!-- 头像及渐变环 -->
-     <div class="relative">
-        <svg class="w-40 h-40" viewbox="0 0 200 200">
-         <defs>
-          <lineargradient id="avatar-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
-           <stop offset="0%" stop-color="#ff28a4">
-           </stop>
-           <stop offset="100%" stop-color="#ffb646">
-           </stop>
-          </lineargradient>
-         </defs>
-         <circle cx="100" cy="100" fill="transparent" r="90" stroke="url(#avatar-gradient)" stroke-width="10">
-         </circle>
-        </svg>
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-gray-400 rounded-full">
-        </div>
-       </div>
-     <!-- 右侧信息区域 -->
-     <div class="flex flex-col flex-1">
-      <!-- 顶部栏：用户名 + 认证 + 按钮 -->
-      <div class="flex items-center space-x-2">
-       <h1 class="text-xl font-bold">
-        mirandakerr
-       </h1>
-       <!-- 认证徽章 -->
-       <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M16.704 3.296a.75.75 0 011.06 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 111.06-1.06l.94.94 2.04-2.04z">
-        </path>
-       </svg>
-       <button class="px-4 py-2 bg-blue-600 text-white rounded font-medium">
-        关注
-       </button>
-       <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium">
-        发消息
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z">
-         </path>
-        </svg>
-       </button>
-       <button class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded">
-        <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 20 20">
-         <path d="M5 5a1 1 0 112 0v8a1 1 0 11-2 0V5zm6 0a1 1 0 112 0v8a1 1 0 11-2 0V5z">
-         </path>
-        </svg>
-       </button>
-      </div>
-      <!-- 统计数据 -->
-      <div class="mt-4 flex space-x-6">
-       <div>
-        <span class="font-bold">
-         3206
-        </span>
-        帖子
-       </div>
-       <div>
-        <span class="font-bold">
-         1438万
-        </span>
-        粉丝
-       </div>
-       <div>
-        <span class="font-bold">
-         7496
-        </span>
-        关注
-       </div>
-      </div>
-      <!-- 名字 -->
-      <div class="mt-2 text-lg font-semibold">
-       Miranda Kerr
-      </div>
-      <!-- @用户名 -->
-      <div class="mt-1 text-gray-600">
-       @mirandakerr
-      </div>
-      <!-- 简介 -->
-      <div class="mt-1">
-       Founder &amp; CEO of
-       <span class="text-blue-600">
-        @koraorganics
-       </span>
-       <svg class="inline w-4 h-4 text-yellow-300" fill="currentColor" viewbox="0 0 20 20">
-        <path d="M10 1.25a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1.25zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm0 4.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75z">
-        </path>
-       </svg>
-      </div>
-      <!-- 链接 -->
-      <div class="mt-1 text-blue-600 flex items-center">
-        <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        width="16"
-        height="16"
-        stroke="#1e6fff"
-        stroke-width="2"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <!-- 上半段链环 -->
-        <path d="M10.59 13.41a3.83 3.83 0 0 1 0-5.41l3.17-3.17a3.83 3.83 0 0 1 5.41 5.41l-1.47 1.47" />
-        <!-- 下半段链环 -->
-        <path d="M13.41 10.59a3.83 3.83 0 0 1 0 5.41l-3.17 3.17a3.83 3.83 0 1 1-5.41-5.41l1.47-1.47" />
-      </svg>
-       linktr.ee/mirandakerr
-      </div>
-      <!-- 关注者提示 -->
-      <div class="mt-2 text-gray-600">
-       cristiano关注了
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 25%; top: 30.22432113341204%; width: 75%; height: 15.407319952774499%;">
-    <div class="flex items-center space-x-4 overflow-x-auto px-4 py-2">
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       KORA Glow
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       KORA Orga...
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Events
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       MK Home
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Self-care
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Tutorials
-      </p>
-     </div>
-     <div class="flex flex-col items-center">
-      <svg class="w-20 h-20 rounded-full bg-gray-300" viewbox="0 0 24 24">
-       <rect fill="gray" height="24" width="24" x="0" y="0">
-       </rect>
-      </svg>
-      <p class="mt-1 text-sm font-medium">
-       Wellness W...
-      </p>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="4" style="left: 25%; top: 45.63164108618654%; width: 75%; height: 53.54191263282172%;">
-    <div>
-     <div class="flex justify-center border-b">
-      <div class="flex items-center px-4 py-3 border-b-2 border-black">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        帖子
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        REELS
-       </span>
-      </div>
-      <div class="flex items-center px-4 py-3 text-gray-700">
-       <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l2 2c.391.391.586.902.586 1.414v5c0 .512-.195 1.024-.586 1.414l-2 2A2.001 2.001 0 0112 19h-5c-.512 0-1.024-.195-1.414-.586L3 16.414V11c0-.512.195-1.024.586-1.414L7 7zm2 4a2 2 0 114 0 2 2 0 01-4 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       <span>
-        标记内容
-       </span>
-      </div>
-     </div>
-     <div class="grid grid-cols-3 gap-2 mt-2">
-      <div class="relative">
-       <div class="bg-gray-300 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-       <div class="bg-gray-300 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26c0 .537.213 1.052.555 1.402l3.197 2.132a1 1 0 001.448-1.074l-.448-2.685a2 2 0 012.944-2.143l2.685.448a1 1 0 001.074-1.448l-2.132-3.197a1 1 0 00-1.402-.555l-4.26.213a2 2 0 01-2.143-2.944l.448-2.685a1 1 0 00-1.074-1.448l-2.132 3.197A1 1 0 009.87 10h4.26c.537 0 1.052.213 1.402.555z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-      <div class="relative">
-       <div class="bg-gray-300 w-full h-96">
-       </div>
-       <div class="absolute top-2 right-2">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-         <path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-         </path>
-        </svg>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0001.html b/screencoder/demo/public/demos/linkedin/0001.html
deleted file mode 100644
index 629c8388ff1d58736e235b11da03496393d8fc37..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0001.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" style="opacity:0;transition:opacity .35s ease-out;" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" style="opacity:0;transition:opacity .35s ease-out;" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0002.html b/screencoder/demo/public/demos/linkedin/0002.html
deleted file mode 100644
index 3d9092341e3f3b3744022323de75d9445543d605..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0002.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" style="opacity:0;transition:opacity .35s ease-out;" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" style="opacity:0;transition:opacity .35s ease-out;" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0003.html b/screencoder/demo/public/demos/linkedin/0003.html
deleted file mode 100644
index eb11dded46e135c5c09ebb76e6e30302f88cf3ff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0003.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" style="opacity:0;transition:opacity .35s ease-out;" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0004.html b/screencoder/demo/public/demos/linkedin/0004.html
deleted file mode 100644
index 676c90ef542995ad550bc8133194de450938937a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0004.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" style="opacity:0;transition:opacity .35s ease-out;" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0005.html b/screencoder/demo/public/demos/linkedin/0005.html
deleted file mode 100644
index 897b877f50e0e92a87ae6aef03bc54010a3ac505..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0005.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0006.html b/screencoder/demo/public/demos/linkedin/0006.html
deleted file mode 100644
index f950e70f2eb8d8c7701d0a8856fc3b81767f2167..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0006.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0007.html b/screencoder/demo/public/demos/linkedin/0007.html
deleted file mode 100644
index 4de9e77ed37fb5bbc1134bf3a00a428746bf7799..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0007.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0008.html b/screencoder/demo/public/demos/linkedin/0008.html
deleted file mode 100644
index adcaaebeae147744123c0dfc521d3aebd459e456..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0008.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0009.html b/screencoder/demo/public/demos/linkedin/0009.html
deleted file mode 100644
index 277ecf7bd5ae5066356325e92af97484d3430bff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0009.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0010.html b/screencoder/demo/public/demos/linkedin/0010.html
deleted file mode 100644
index ec094432aa652d4629deca63d65e8bd027b43f30..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0010.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0011.html b/screencoder/demo/public/demos/linkedin/0011.html
deleted file mode 100644
index 7ff0c35ffe63230a509d132a06a59b920e8ee279..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0011.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0012.html b/screencoder/demo/public/demos/linkedin/0012.html
deleted file mode 100644
index a40284535a8d9e3cd6c5a7d187c3038bc39a9bb8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0012.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0013.html b/screencoder/demo/public/demos/linkedin/0013.html
deleted file mode 100644
index e8075759b4c0232e395f1bf45143a26527fdcd85..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0013.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0014.html b/screencoder/demo/public/demos/linkedin/0014.html
deleted file mode 100644
index f4a991b87ca7c0806662c4c9eb512383c15ffb46..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0014.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0015.html b/screencoder/demo/public/demos/linkedin/0015.html
deleted file mode 100644
index ec5e1c142096fb659393e3ebece91d50ac1bf68f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0015.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0016.html b/screencoder/demo/public/demos/linkedin/0016.html
deleted file mode 100644
index 42d92182cedbcdf95b9f6363a555a232fae8b342..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0016.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0017.html b/screencoder/demo/public/demos/linkedin/0017.html
deleted file mode 100644
index c97d852c26e37124a20bb5ceb38744fd307f2822..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0017.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0018.html b/screencoder/demo/public/demos/linkedin/0018.html
deleted file mode 100644
index 3e82837101275396c7828537f1c4c5cd3b8fc738..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0018.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0019.html b/screencoder/demo/public/demos/linkedin/0019.html
deleted file mode 100644
index c657b870229a784e6c7be680eb481d003f84a6bd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0019.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0020.html b/screencoder/demo/public/demos/linkedin/0020.html
deleted file mode 100644
index 284616c1bbd3627a1f78fc07745681d2fca03936..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0020.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0021.html b/screencoder/demo/public/demos/linkedin/0021.html
deleted file mode 100644
index f506738f067d5f88a0d1515c1a7b91a2aa8d02b6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0021.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0022.html b/screencoder/demo/public/demos/linkedin/0022.html
deleted file mode 100644
index 1f2e7d77b41b9e3172dc6227e3d161d80c8bbd5f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0022.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0023.html b/screencoder/demo/public/demos/linkedin/0023.html
deleted file mode 100644
index 79ac3d3ee447cbdc529390b7becd55960cdbe047..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0023.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0024.html b/screencoder/demo/public/demos/linkedin/0024.html
deleted file mode 100644
index 4b90759c74024fe89e46bc3cbf9624fdf709d56c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0024.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0025.html b/screencoder/demo/public/demos/linkedin/0025.html
deleted file mode 100644
index dc981aac629d373ad59008f833feae702de69a41..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0025.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm" style="opacity:0;transition:opacity .35s ease-out;">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0026.html b/screencoder/demo/public/demos/linkedin/0026.html
deleted file mode 100644
index d687d9df54e55e76507bb47a3608f81612e7641a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0026.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0027.html b/screencoder/demo/public/demos/linkedin/0027.html
deleted file mode 100644
index 600ca56950726c3c8c5d7a047b4085a5f9a297d0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0027.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4" style="opacity:0;transition:opacity .35s ease-out;">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0028.html b/screencoder/demo/public/demos/linkedin/0028.html
deleted file mode 100644
index 1b4c7bed4c84dc204ae45a0faaf5a9b16147618f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0028.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer" style="opacity:0;transition:opacity .35s ease-out;">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0029.html b/screencoder/demo/public/demos/linkedin/0029.html
deleted file mode 100644
index 99ec4864dd5e48d94536905df0683452d007cecd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0029.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0030.html b/screencoder/demo/public/demos/linkedin/0030.html
deleted file mode 100644
index 04111c457e62c64d7f6e5de9e6ea0d3d75e78a24..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0030.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0031.html b/screencoder/demo/public/demos/linkedin/0031.html
deleted file mode 100644
index 9b2b92658239d20e4d7b681ac9b07c75f5fdd414..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0031.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0032.html b/screencoder/demo/public/demos/linkedin/0032.html
deleted file mode 100644
index 9b2b6147a42b9719a6aec240437efbd398b05a39..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0032.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0033.html b/screencoder/demo/public/demos/linkedin/0033.html
deleted file mode 100644
index 43d93994f409fe966692ea93cafb66152548f540..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0033.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0034.html b/screencoder/demo/public/demos/linkedin/0034.html
deleted file mode 100644
index 78e4959bea8adc6b001b764e5d5af29e70c2889f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0034.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between" style="opacity:0;transition:opacity .35s ease-out;">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0035.html b/screencoder/demo/public/demos/linkedin/0035.html
deleted file mode 100644
index c948da9aebbd5e42c6e088ddbfc918d7308bd7e0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0035.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0036.html b/screencoder/demo/public/demos/linkedin/0036.html
deleted file mode 100644
index 79ad8477357d43dfb49b0d3a82e09f11732df2ed..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0036.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0037.html b/screencoder/demo/public/demos/linkedin/0037.html
deleted file mode 100644
index 3a61829bfe81d8a77e9be475c13a97684b10675a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0037.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0038.html b/screencoder/demo/public/demos/linkedin/0038.html
deleted file mode 100644
index 9a15774ec63e1bdad089771c635715f89c30e756..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0038.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0039.html b/screencoder/demo/public/demos/linkedin/0039.html
deleted file mode 100644
index e605fbde461e9f28a02e3b83cc6e9b092cf47614..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0039.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0040.html b/screencoder/demo/public/demos/linkedin/0040.html
deleted file mode 100644
index 79d7c4b771101fe538b6c7488acee2f4ecc29e38..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0040.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0041.html b/screencoder/demo/public/demos/linkedin/0041.html
deleted file mode 100644
index 8364e62a0998d518ec7fe9f9bf030b89e9cc5cca..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0041.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0042.html b/screencoder/demo/public/demos/linkedin/0042.html
deleted file mode 100644
index 42beacf892859db28ac79bafcfde54022fd7577e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0042.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0043.html b/screencoder/demo/public/demos/linkedin/0043.html
deleted file mode 100644
index a7ec9f61310a8bd28a2ba8d9b2a0db6f454ad730..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0043.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0044.html b/screencoder/demo/public/demos/linkedin/0044.html
deleted file mode 100644
index 20dbebb6117887c5f63fb89c7de2c6a75b770c61..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0044.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0045.html b/screencoder/demo/public/demos/linkedin/0045.html
deleted file mode 100644
index e19518c2cb7271607a88e5de08c79c63eac7b901..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0045.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0046.html b/screencoder/demo/public/demos/linkedin/0046.html
deleted file mode 100644
index 885442274915f70562e82d99aa5fe310550c623e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0046.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span style="opacity:0;transition:opacity .35s ease-out;">
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0047.html b/screencoder/demo/public/demos/linkedin/0047.html
deleted file mode 100644
index c931693cf957e1c0eba9ffe61ce1fdd2e35243ff..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0047.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0048.html b/screencoder/demo/public/demos/linkedin/0048.html
deleted file mode 100644
index d16b5009e69c26e3a9ea46356a1a8b99d2b4381b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0048.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0049.html b/screencoder/demo/public/demos/linkedin/0049.html
deleted file mode 100644
index c8c47bb0d0ebef36f021d5a02cd010ada84a220b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0049.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0050.html b/screencoder/demo/public/demos/linkedin/0050.html
deleted file mode 100644
index 108be9de768c0a4dc2c7b9ca47cd21ee680d767d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0050.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0051.html b/screencoder/demo/public/demos/linkedin/0051.html
deleted file mode 100644
index 42ad82193bf242bef1cc1f593e20d1e2e20db76c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0051.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0052.html b/screencoder/demo/public/demos/linkedin/0052.html
deleted file mode 100644
index 77040bc514db64c5f65b93116d196e91c30242f4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0052.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0053.html b/screencoder/demo/public/demos/linkedin/0053.html
deleted file mode 100644
index c5675bcd86af4dd52641cbf7594c9497bdf32d46..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0053.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6" style="opacity:0;transition:opacity .35s ease-out;">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0054.html b/screencoder/demo/public/demos/linkedin/0054.html
deleted file mode 100644
index 1d81cd47c5c3f8b35ce9c0fe0ea5c8f921c8d505..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0054.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0055.html b/screencoder/demo/public/demos/linkedin/0055.html
deleted file mode 100644
index f11de4217cc3685921fd23a216c609301ed5a8c9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0055.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md" style="opacity:0;transition:opacity .35s ease-out;">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0056.html b/screencoder/demo/public/demos/linkedin/0056.html
deleted file mode 100644
index f07f7f68ae426836a3aed9f3d8217f145b886afd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0056.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0057.html b/screencoder/demo/public/demos/linkedin/0057.html
deleted file mode 100644
index 48cb28fedd77c4a40997ee01ec709218f7b01159..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0057.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0058.html b/screencoder/demo/public/demos/linkedin/0058.html
deleted file mode 100644
index 6d038472800cf8d204d335c75e8aa15dd9fed546..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0058.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0059.html b/screencoder/demo/public/demos/linkedin/0059.html
deleted file mode 100644
index dac48c6797af71e5232bf02a81709b3b77cd4434..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0059.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0060.html b/screencoder/demo/public/demos/linkedin/0060.html
deleted file mode 100644
index 7fa8903e38b0ad30c00de1a95777bbb6bf8359ca..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0060.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0061.html b/screencoder/demo/public/demos/linkedin/0061.html
deleted file mode 100644
index 1d7e437f5e81f45ac48b72c378d5662caa4b7d57..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0061.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0062.html b/screencoder/demo/public/demos/linkedin/0062.html
deleted file mode 100644
index a65feebb3d46ef311c4a4ac534075d685a193b40..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0062.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0063.html b/screencoder/demo/public/demos/linkedin/0063.html
deleted file mode 100644
index 33990c9e20fa5f70ad51d3c3b67fca91ba3e57f8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0063.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0064.html b/screencoder/demo/public/demos/linkedin/0064.html
deleted file mode 100644
index 281c243f4291eb915de190b4df1125ff0b69c1d3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0064.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0065.html b/screencoder/demo/public/demos/linkedin/0065.html
deleted file mode 100644
index d00a2be9ed0fe5da4673b056ff3fd1928e4908dc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0065.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8" style="opacity:0;transition:opacity .35s ease-out;">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0066.html b/screencoder/demo/public/demos/linkedin/0066.html
deleted file mode 100644
index a53f85bed7f3dc3ce38f0f73e5eb77f55bece563..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0066.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2" style="opacity:0;transition:opacity .35s ease-out;">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0067.html b/screencoder/demo/public/demos/linkedin/0067.html
deleted file mode 100644
index d81b01457246ab8ff7cf489126dbc0264f3cddc0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0067.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0068.html b/screencoder/demo/public/demos/linkedin/0068.html
deleted file mode 100644
index b71a874286145d21fff5914995445179d36eca5d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0068.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span style="opacity:0;transition:opacity .35s ease-out;">
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0069.html b/screencoder/demo/public/demos/linkedin/0069.html
deleted file mode 100644
index 1951bb03af40716a1368fac4eab53d4aa9ea334a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0069.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#" style="opacity:0;transition:opacity .35s ease-out;">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0070.html b/screencoder/demo/public/demos/linkedin/0070.html
deleted file mode 100644
index fce023fc01b51751c59018e1480406d486b0da5d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0070.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0071.html b/screencoder/demo/public/demos/linkedin/0071.html
deleted file mode 100644
index eb00078f67808e3bb0f29256f6ca16407b8e07ee..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0071.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0072.html b/screencoder/demo/public/demos/linkedin/0072.html
deleted file mode 100644
index 9c54f4091d774891b8d137a5500f7ec90382d010..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0072.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0073.html b/screencoder/demo/public/demos/linkedin/0073.html
deleted file mode 100644
index f880bcd1307d41c39f6afb9380badaaedce0eaaa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0073.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0074.html b/screencoder/demo/public/demos/linkedin/0074.html
deleted file mode 100644
index 45020400ee30f9f2eb2a6713ec9d08ae7fcb8615..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0074.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0075.html b/screencoder/demo/public/demos/linkedin/0075.html
deleted file mode 100644
index 4f3ce82b868685473703b5db04cb37668cd67dd8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0075.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0076.html b/screencoder/demo/public/demos/linkedin/0076.html
deleted file mode 100644
index 99dd8260e1a5a52559e5bebebd428912bc484e80..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0076.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0077.html b/screencoder/demo/public/demos/linkedin/0077.html
deleted file mode 100644
index 0bbedd987e69997c72bc3bc42f35eafe9d08dbef..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0077.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0078.html b/screencoder/demo/public/demos/linkedin/0078.html
deleted file mode 100644
index 9eeedc52374c79c006ff0819ec2cbadd7116f654..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0078.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0079.html b/screencoder/demo/public/demos/linkedin/0079.html
deleted file mode 100644
index 430474f6e47d8dd227b4ddf385b79b4d81f762c7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0079.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0080.html b/screencoder/demo/public/demos/linkedin/0080.html
deleted file mode 100644
index dea117f3a12b1044b66f9911c2db98310c932a08..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0080.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0081.html b/screencoder/demo/public/demos/linkedin/0081.html
deleted file mode 100644
index 41e9a20b86d179cbd0d8c68288f4d834477426b6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0081.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0082.html b/screencoder/demo/public/demos/linkedin/0082.html
deleted file mode 100644
index 114a182972cf85445bc456a91e7b05094f0391d2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0082.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0083.html b/screencoder/demo/public/demos/linkedin/0083.html
deleted file mode 100644
index 58436e90a36dd787efb95784f6107e73605cf4b1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0083.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0084.html b/screencoder/demo/public/demos/linkedin/0084.html
deleted file mode 100644
index 2fc63763b305e05dbb4974494d28daceefe8ee65..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0084.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0085.html b/screencoder/demo/public/demos/linkedin/0085.html
deleted file mode 100644
index cfdefca69a1b6ace79459eacc19830249f008761..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0085.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0086.html b/screencoder/demo/public/demos/linkedin/0086.html
deleted file mode 100644
index 2768a90806f6bc0798a01385f5ee3e9255a6b4de..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0086.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0087.html b/screencoder/demo/public/demos/linkedin/0087.html
deleted file mode 100644
index 78a548f2016840659a3608905a3c4456c7e2f4cd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0087.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0088.html b/screencoder/demo/public/demos/linkedin/0088.html
deleted file mode 100644
index 572702d248604e9833a0909ad37469fa1a0f1c77..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0088.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0089.html b/screencoder/demo/public/demos/linkedin/0089.html
deleted file mode 100644
index 7b4696c84260f831ebc0403d40d4dc5a020057d8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0089.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0090.html b/screencoder/demo/public/demos/linkedin/0090.html
deleted file mode 100644
index eb4584057dd57d3e204c4ff1a6e55d9d1fbf80b7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0090.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0091.html b/screencoder/demo/public/demos/linkedin/0091.html
deleted file mode 100644
index d407ec5b0ac4da17713278de3c4859d142452c2c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0091.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0092.html b/screencoder/demo/public/demos/linkedin/0092.html
deleted file mode 100644
index 4e38178499828445a3d0fbabecdfc57515f63cca..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0092.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0093.html b/screencoder/demo/public/demos/linkedin/0093.html
deleted file mode 100644
index 53b2066fb102473057345c010b5af8901a673a72..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0093.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0094.html b/screencoder/demo/public/demos/linkedin/0094.html
deleted file mode 100644
index b4a6b267cb4b73a5ad42026351b8d7c07e7795f6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0094.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0095.html b/screencoder/demo/public/demos/linkedin/0095.html
deleted file mode 100644
index 10b45c5fae9a2b57ca04b06026cfe1313bc17dac..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0095.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0096.html b/screencoder/demo/public/demos/linkedin/0096.html
deleted file mode 100644
index a69294f552782d5195688b2de251194774df077f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0096.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0097.html b/screencoder/demo/public/demos/linkedin/0097.html
deleted file mode 100644
index 9aa6051d74f2231b40f01d10f2e2a653f860a759..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0097.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0098.html b/screencoder/demo/public/demos/linkedin/0098.html
deleted file mode 100644
index dee7aaf31d6517fa9ef846fcb4130a0bbf44650e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0098.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0099.html b/screencoder/demo/public/demos/linkedin/0099.html
deleted file mode 100644
index bf9563e13c7396dd5fb6d2e0ffb8aa7536d280dd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0099.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0100.html b/screencoder/demo/public/demos/linkedin/0100.html
deleted file mode 100644
index 4cf7a8e2c952e7c087b13346f4a8f236ec0470be..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0100.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0101.html b/screencoder/demo/public/demos/linkedin/0101.html
deleted file mode 100644
index dcae1653846f519841c28457a53928695e94e04f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0101.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0102.html b/screencoder/demo/public/demos/linkedin/0102.html
deleted file mode 100644
index 203bc8b6c585487ddab8d18b2b6e4f09a2e420a9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0102.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0103.html b/screencoder/demo/public/demos/linkedin/0103.html
deleted file mode 100644
index be23edddc6a14e64e02cd4797780abdb334d5008..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0103.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0104.html b/screencoder/demo/public/demos/linkedin/0104.html
deleted file mode 100644
index d5b03a4846411df5c64e04f179b0b3fee6a84163..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0104.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0105.html b/screencoder/demo/public/demos/linkedin/0105.html
deleted file mode 100644
index 0ef2126bf69e00412bc338e5bbabd5dcdbfadb08..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0105.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0106.html b/screencoder/demo/public/demos/linkedin/0106.html
deleted file mode 100644
index ca109f188ef1e0f0f01c7911366c8245b0689486..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0106.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold" style="opacity:0;transition:opacity .35s ease-out;">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0107.html b/screencoder/demo/public/demos/linkedin/0107.html
deleted file mode 100644
index b86ef093aecc5cf24f2f77763cba9094818b9761..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0107.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600" style="opacity:0;transition:opacity .35s ease-out;">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0108.html b/screencoder/demo/public/demos/linkedin/0108.html
deleted file mode 100644
index 40a3f2e2ae90be792f1ad872e4072197397a0fd5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0108.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0109.html b/screencoder/demo/public/demos/linkedin/0109.html
deleted file mode 100644
index 213d58907c58c51a4ee3c9258742d1cdc7c63e9e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0109.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0110.html b/screencoder/demo/public/demos/linkedin/0110.html
deleted file mode 100644
index 0b00dbb6a9184af8561f5a7b4e592bbdb967b2d8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0110.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0111.html b/screencoder/demo/public/demos/linkedin/0111.html
deleted file mode 100644
index 8110e2d4dfc820fa0c1082459eadff6a69027b9b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0111.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="20" width="20" x="78" y="2">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-8 w-8" viewbox="0 0 24 24">
-<path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-</path>
-</svg>
-<span class="text-sm">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<div class="w-6 h-6 bg-gray-400">
-</div>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/0112.html b/screencoder/demo/public/demos/linkedin/0112.html
deleted file mode 100644
index b5dc96ae921cb905297e82d255a3a8b3cc98af89..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/0112.html
+++ /dev/null
@@ -1,312 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>
-   Bounding Boxes Layout
-  </title>
-<style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<div class="box" id="1" style="left: 1.2594458438287155%; top: 0.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-<div class="flex flex-row items-center justify-between">
-<!-- LinkedIn Logo -->
-<svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-<text fill="blue" font-family="sans-serif" font-size="20" x="0" y="20">
-       Linked
-      </text>
-<rect fill="blue" height="16" width="20" x="66" y="5">
-</rect>
-<text fill="white" font-family="sans-serif" font-size="16" x="70" y="18">
-       in
-      </text>
-</svg>
-<div class="flex flex-row items-center">
-<!-- Top Content -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-6 w-6" viewbox="0 0 24 24">
-<path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-xs">
-        Top Content
-       </span>
-</div>
-<!-- People (with underline) -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-<svg class="h-6 w-6" viewbox="0 0 24 24">
-<path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-</path>
-</svg>
-<span class="text-xs">
-        People
-       </span>
-</div>
-<!-- Learning -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-6 w-6" viewbox="0 0 24 24">
-<path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-</path>
-</svg>
-<span class="text-xs">
-        Learning
-       </span>
-</div>
-<!-- Jobs -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-6 w-6" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-xs">
-        Jobs
-       </span>
-</div>
-<!-- Games -->
-<div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-<svg class="h-6 w-6" viewbox="0 0 24 24">
-<path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V6z" fill="currentColor">
-</path>
-</svg>
-<span class="text-xs">
-        Games
-       </span>
-</div>
-<!-- Divider -->
-<div class="border-l border-gray-300 h-6 mx-4">
-</div>
-<!-- Join now -->
-<div class="text-black text-sm font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-<!-- Sign in button -->
-<button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-</div>
-</div>
-</div>
-<div class="box" id="2" style="left: 1.2594458438287155%; top: 12.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-<div class="bg-white shadow rounded">
-<div class="w-full h-40 bg-gray-300">
-</div>
-<div class="relative ml-6 -mt-16">
-<div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-</div>
-</div>
-<div class="p-6">
-<div class="flex justify-between">
-<div>
-<div class="flex justify-between items-center mb-2">
-<h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-<div class="text-gray-500">
-          ...
-         </div>
-</div>
-<div class="flex items-center space-x-2 text-gray-700 mb-2">
-<span>
-          San Francisco, California, United States
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-</div>
-<div class="flex items-center space-x-2 text-gray-600 mb-4">
-<span>
-          80K followers
-         </span>
-<span class="text-gray-500">
-          ·
-         </span>
-<span>
-          280 connections
-         </span>
-</div>
-<div class="flex items-center space-x-2 mb-4">
-<div class="flex space-x-1">
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-<div class="w-8 h-8 bg-gray-400 rounded-full">
-</div>
-</div>
-<a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-</div>
-<div class="flex space-x-4 mb-6">
-<button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-<button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-</div>
-</div>
-<div class="flex flex-col space-y-6">
-<div class="flex items-center space-x-2">
-<img alt="icon" class="w-6 h-6 object-cover" src="../../assets/demo4_cropped/demo4_6.png"/>
-<a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<img alt="icon" class="w-6 h-6 object-cover" src="../../assets/demo4_cropped/demo4_7.png"/>
-<a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-</div>
-<div class="flex items-center space-x-2">
-<img alt="icon" class="w-6 h-6 object-cover" src="../../assets/demo4_cropped/demo4_8.png"/>
-<a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-</div>
-</div>
-</div>
-<div class="mt-8">
-<h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-<div class="flex items-center space-x-2">
-<span>
-         https://karpathy.ai/
-        </span>
-<a class="text-blue-600" href="#">
-         see more
-        </a>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left: 68.68178001679262%; top: 12.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-<h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-<p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-<p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-<p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-<div class="flex items-center mb-4">
-<div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-<div>
-<h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-<p class="text-gray-600">
-       New York, NY
-      </p>
-<button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-</path>
-</svg>
-       Connect
-      </button>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/final_linkedin.html b/screencoder/demo/public/demos/linkedin/final_linkedin.html
deleted file mode 100644
index 2eafeb0fc2c20d9dc90e74269441d1b95c3ba955..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/final_linkedin.html
+++ /dev/null
@@ -1,306 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-    <div class="flex flex-row items-center justify-between">
-     <!-- LinkedIn Logo -->
-     <svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-      <text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-      <rect fill="blue" height="20" width="20" x="78" y="2">
-      </rect>
-      <text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-     </svg>
-     <div class="flex flex-row items-center">
-      <!-- Top Content -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-         
-        </path>
-       </svg>
-       <span class="text-sm">
-        Top Content
-       </span>
-      </div>
-      <!-- People (with underline) -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        People
-       </span>
-      </div>
-      <!-- Learning -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Learning
-       </span>
-      </div>
-      <!-- Jobs -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Jobs
-       </span>
-      </div>
-      <!-- Games -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Games
-       </span>
-      </div>
-      <!-- Divider -->
-      <div class="border-l border-gray-300 h-6 mx-4">
-      </div>
-      <!-- Join now -->
-      <div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-      <!-- Sign in button -->
-      <button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-    <div class="bg-white shadow rounded">
-     <img alt="Profile banner" class="w-full h-40 object-cover" src="../../assets/demo4_cropped/demo4_1.png"/>
-     <div class="relative ml-6 -mt-16">
-      <img alt="Profile avatar" class="w-32 h-32 rounded-full border-4 border-blue-500 object-cover" src="../../assets/demo4_cropped/demo4_2.png"/>
-     </div>
-     <div class="p-6">
-      <div class="flex justify-between">
-       <div>
-        <div class="flex justify-between items-center mb-2">
-         <h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-         <div class="text-gray-500">
-          ...
-         </div>
-        </div>
-        <div class="flex items-center space-x-2 text-gray-700 mb-2">
-         <span>
-          San Francisco, California, United States
-         </span>
-         <span class="text-gray-500">
-          ·
-         </span>
-         <a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-        </div>
-        <div class="flex items-center space-x-2 text-gray-600 mb-4">
-         <span>
-          80K followers
-         </span>
-         <span class="text-gray-500">
-          ·
-         </span>
-         <span>
-          280 connections
-         </span>
-        </div>
-        <div class="flex items-center space-x-2 mb-4">
-         <div class="flex space-x-1">
-          <img alt="mutual 1" class="w-8 h-8 rounded-full object-cover" src="../../assets/demo4_cropped/demo4_3.png"/>
-          <img alt="mutual 2" class="w-8 h-8 rounded-full object-cover" src="../../assets/demo4_cropped/demo4_4.png"/>
-          <img alt="mutual 3" class="w-8 h-8 rounded-full object-cover" src="../../assets/demo4_cropped/demo4_5.png"/>
-         </div>
-         <a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-        </div>
-        <div class="flex space-x-4 mb-6">
-         <button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-         <button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-        </div>
-       </div>
-       <div class="flex flex-col space-y-6">
-        <div class="flex items-center space-x-2">
-         <img alt="icon" class="w-8 h-8 object-cover" src="../../assets/demo4_cropped/demo4_6.png"/>
-         <a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-        </div>
-        <div class="flex items-center space-x-2">
-         <img alt="icon" class="w-8 h-8 object-cover" src="../../assets/demo4_cropped/demo4_7.png"/>
-         <a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-        </div>
-        <div class="flex items-center space-x-2">
-         <a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-        </div>
-       </div>
-      </div>
-      <div class="mt-8">
-       <h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-       <div class="flex items-center space-x-2">
-        <span>
-         https://karpathy.ai/
-        </span>
-        <a class="text-blue-600" href="#">
-         see more
-        </a>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-    <h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-    <div class="flex items-center mb-4">
-     <img alt="avatar" class="w-12 h-12 rounded-full object-cover mr-4" src="../../assets/demo4_cropped/demo4_8.png"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="avatar" class="w-12 h-12 rounded-full object-cover mr-4" src="../../assets/demo4_cropped/demo4_9.png"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-      <p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="avatar" class="w-12 h-12 rounded-full object-cover mr-4" src="../../assets/demo4_cropped/demo4_10.png"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-      <p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="avatar" class="w-12 h-12 rounded-full object-cover mr-4" src="../../assets/demo4_cropped/demo4_11.png"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <img alt="avatar" class="w-12 h-12 rounded-full object-cover mr-4" src="../../assets/demo4_cropped/demo4_12.png"/>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-      <p class="text-gray-600">
-       New York, NY
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/linkedin/manifest.json b/screencoder/demo/public/demos/linkedin/manifest.json
deleted file mode 100644
index 441bdacdaa11128f8891717d927b63f44343b77c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/manifest.json
+++ /dev/null
@@ -1,557 +0,0 @@
-[
-  {
-    "file": "0001.html",
-    "caption": "Elements: 1/111",
-    "diff": ""
-  },
-  {
-    "file": "0002.html",
-    "caption": "Elements: 2/111",
-    "diff": "--- \n+++ \n@@ -37,7 +37,7 @@\n <div class=\"box\" id=\"1\" style=\"left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;\">\n <div class=\"flex flex-row items-center justify-between\">\n <!-- LinkedIn Logo -->\n-<svg class=\"h-8 w-auto text-blue-600 mr-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 100 24\">\n+<svg class=\"h-8 w-auto text-blue-600 mr-8\" viewbox=\"0 0 100 24\">\n <text fill=\"blue\" font-family=\"sans-serif\" font-size=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" x=\"0\" y=\"20\">\n        Linked\n       </text>"
-  },
-  {
-    "file": "0003.html",
-    "caption": "Elements: 3/111",
-    "diff": "--- \n+++ \n@@ -38,7 +38,7 @@\n <div class=\"flex flex-row items-center justify-between\">\n <!-- LinkedIn Logo -->\n <svg class=\"h-8 w-auto text-blue-600 mr-8\" viewbox=\"0 0 100 24\">\n-<text fill=\"blue\" font-family=\"sans-serif\" font-size=\"24\" style=\"opacity:0;transition:opacity .35s ease-out;\" x=\"0\" y=\"20\">\n+<text fill=\"blue\" font-family=\"sans-serif\" font-size=\"24\" x=\"0\" y=\"20\">\n        Linked\n       </text>\n <rect fill=\"blue\" height=\"20\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"20\" x=\"78\" y=\"2\">"
-  },
-  {
-    "file": "0004.html",
-    "caption": "Elements: 4/111",
-    "diff": "--- \n+++ \n@@ -41,7 +41,7 @@\n <text fill=\"blue\" font-family=\"sans-serif\" font-size=\"24\" x=\"0\" y=\"20\">\n        Linked\n       </text>\n-<rect fill=\"blue\" height=\"20\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"20\" x=\"78\" y=\"2\">\n+<rect fill=\"blue\" height=\"20\" width=\"20\" x=\"78\" y=\"2\">\n </rect>\n <text fill=\"white\" font-family=\"sans-serif\" font-size=\"20\" style=\"opacity:0;transition:opacity .35s ease-out;\" x=\"80\" y=\"18\">\n        in"
-  },
-  {
-    "file": "0005.html",
-    "caption": "Elements: 5/111",
-    "diff": "--- \n+++ \n@@ -43,7 +43,7 @@\n       </text>\n <rect fill=\"blue\" height=\"20\" width=\"20\" x=\"78\" y=\"2\">\n </rect>\n-<text fill=\"white\" font-family=\"sans-serif\" font-size=\"20\" style=\"opacity:0;transition:opacity .35s ease-out;\" x=\"80\" y=\"18\">\n+<text fill=\"white\" font-family=\"sans-serif\" font-size=\"20\" x=\"80\" y=\"18\">\n        in\n       </text>\n </svg>"
-  },
-  {
-    "file": "0006.html",
-    "caption": "Elements: 6/111",
-    "diff": "--- \n+++ \n@@ -47,7 +47,7 @@\n        in\n       </text>\n </svg>\n-<div class=\"flex flex-row items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-row items-center\">\n <!-- Top Content -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">"
-  },
-  {
-    "file": "0007.html",
-    "caption": "Elements: 7/111",
-    "diff": "--- \n+++ \n@@ -49,7 +49,7 @@\n </svg>\n <div class=\"flex flex-row items-center\">\n <!-- Top Content -->\n-<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0008.html",
-    "caption": "Elements: 8/111",
-    "diff": "--- \n+++ \n@@ -50,7 +50,7 @@\n <div class=\"flex flex-row items-center\">\n <!-- Top Content -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n-<svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0009.html",
-    "caption": "Elements: 9/111",
-    "diff": "--- \n+++ \n@@ -51,7 +51,7 @@\n <!-- Top Content -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z\" fill=\"currentColor\">\n </path>\n </svg>\n <span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0010.html",
-    "caption": "Elements: 10/111",
-    "diff": "--- \n+++ \n@@ -54,7 +54,7 @@\n <path d=\"M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z\" fill=\"currentColor\">\n </path>\n </svg>\n-<span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-sm\">\n         Top Content\n        </span>\n </div>"
-  },
-  {
-    "file": "0011.html",
-    "caption": "Elements: 11/111",
-    "diff": "--- \n+++ \n@@ -59,7 +59,7 @@\n        </span>\n </div>\n <!-- People (with underline) -->\n-<div class=\"flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0012.html",
-    "caption": "Elements: 12/111",
-    "diff": "--- \n+++ \n@@ -60,7 +60,7 @@\n </div>\n <!-- People (with underline) -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black\">\n-<svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0013.html",
-    "caption": "Elements: 13/111",
-    "diff": "--- \n+++ \n@@ -61,7 +61,7 @@\n <!-- People (with underline) -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black\">\n <svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z\" fill=\"currentColor\">\n </path>\n </svg>\n <span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0014.html",
-    "caption": "Elements: 14/111",
-    "diff": "--- \n+++ \n@@ -64,7 +64,7 @@\n <path d=\"M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z\" fill=\"currentColor\">\n </path>\n </svg>\n-<span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-sm\">\n         People\n        </span>\n </div>"
-  },
-  {
-    "file": "0015.html",
-    "caption": "Elements: 15/111",
-    "diff": "--- \n+++ \n@@ -69,7 +69,7 @@\n        </span>\n </div>\n <!-- Learning -->\n-<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0016.html",
-    "caption": "Elements: 16/111",
-    "diff": "--- \n+++ \n@@ -70,7 +70,7 @@\n </div>\n <!-- Learning -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n-<svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0017.html",
-    "caption": "Elements: 17/111",
-    "diff": "--- \n+++ \n@@ -71,7 +71,7 @@\n <!-- Learning -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z\" fill=\"currentColor\">\n </path>\n </svg>\n <span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0018.html",
-    "caption": "Elements: 18/111",
-    "diff": "--- \n+++ \n@@ -74,7 +74,7 @@\n <path d=\"M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z\" fill=\"currentColor\">\n </path>\n </svg>\n-<span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-sm\">\n         Learning\n        </span>\n </div>"
-  },
-  {
-    "file": "0019.html",
-    "caption": "Elements: 19/111",
-    "diff": "--- \n+++ \n@@ -79,7 +79,7 @@\n        </span>\n </div>\n <!-- Jobs -->\n-<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0020.html",
-    "caption": "Elements: 20/111",
-    "diff": "--- \n+++ \n@@ -80,7 +80,7 @@\n </div>\n <!-- Jobs -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n-<svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n <path d=\"M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0021.html",
-    "caption": "Elements: 21/111",
-    "diff": "--- \n+++ \n@@ -81,7 +81,7 @@\n <!-- Jobs -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z\" fill=\"currentColor\">\n </path>\n </svg>\n <span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0022.html",
-    "caption": "Elements: 22/111",
-    "diff": "--- \n+++ \n@@ -84,7 +84,7 @@\n <path d=\"M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z\" fill=\"currentColor\">\n </path>\n </svg>\n-<span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-sm\">\n         Jobs\n        </span>\n </div>"
-  },
-  {
-    "file": "0023.html",
-    "caption": "Elements: 23/111",
-    "diff": "--- \n+++ \n@@ -89,7 +89,7 @@\n        </span>\n </div>\n <!-- Games -->\n-<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0024.html",
-    "caption": "Elements: 24/111",
-    "diff": "--- \n+++ \n@@ -90,7 +90,7 @@\n </div>\n <!-- Games -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n-<svg class=\"h-8 w-8\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n <path d=\"M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0025.html",
-    "caption": "Elements: 25/111",
-    "diff": "--- \n+++ \n@@ -91,7 +91,7 @@\n <!-- Games -->\n <div class=\"flex flex-col items-center mx-4 cursor-pointer text-gray-600\">\n <svg class=\"h-8 w-8\" viewbox=\"0 0 24 24\">\n-<path d=\"M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z\" fill=\"currentColor\">\n </path>\n </svg>\n <span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0026.html",
-    "caption": "Elements: 26/111",
-    "diff": "--- \n+++ \n@@ -94,7 +94,7 @@\n <path d=\"M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z\" fill=\"currentColor\">\n </path>\n </svg>\n-<span class=\"text-sm\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-sm\">\n         Games\n        </span>\n </div>"
-  },
-  {
-    "file": "0027.html",
-    "caption": "Elements: 27/111",
-    "diff": "--- \n+++ \n@@ -99,7 +99,7 @@\n        </span>\n </div>\n <!-- Divider -->\n-<div class=\"border-l border-gray-300 h-6 mx-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"border-l border-gray-300 h-6 mx-4\">\n </div>\n <!-- Join now -->\n <div class=\"text-black text-xl font-medium cursor-pointer mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0028.html",
-    "caption": "Elements: 28/111",
-    "diff": "--- \n+++ \n@@ -102,7 +102,7 @@\n <div class=\"border-l border-gray-300 h-6 mx-4\">\n </div>\n <!-- Join now -->\n-<div class=\"text-black text-xl font-medium cursor-pointer mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"text-black text-xl font-medium cursor-pointer mr-4\">\n        Join now\n       </div>\n <!-- Sign in button -->"
-  },
-  {
-    "file": "0029.html",
-    "caption": "Elements: 29/111",
-    "diff": "--- \n+++ \n@@ -106,7 +106,7 @@\n        Join now\n       </div>\n <!-- Sign in button -->\n-<button class=\"border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer\">\n        Sign in\n       </button>\n </div>"
-  },
-  {
-    "file": "0030.html",
-    "caption": "Elements: 30/111",
-    "diff": "--- \n+++ \n@@ -113,7 +113,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"2\" style=\"left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;\">\n-<div class=\"bg-white shadow rounded\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"bg-white shadow rounded\">\n <div class=\"w-full h-40 bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"relative ml-6 -mt-16\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0031.html",
-    "caption": "Elements: 31/111",
-    "diff": "--- \n+++ \n@@ -114,7 +114,7 @@\n </div>\n <div class=\"box\" id=\"2\" style=\"left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;\">\n <div class=\"bg-white shadow rounded\">\n-<div class=\"w-full h-40 bg-gray-300\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-full h-40 bg-gray-300\">\n </div>\n <div class=\"relative ml-6 -mt-16\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0032.html",
-    "caption": "Elements: 32/111",
-    "diff": "--- \n+++ \n@@ -116,7 +116,7 @@\n <div class=\"bg-white shadow rounded\">\n <div class=\"w-full h-40 bg-gray-300\">\n </div>\n-<div class=\"relative ml-6 -mt-16\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative ml-6 -mt-16\">\n <div class=\"w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n </div>"
-  },
-  {
-    "file": "0033.html",
-    "caption": "Elements: 33/111",
-    "diff": "--- \n+++ \n@@ -117,7 +117,7 @@\n <div class=\"w-full h-40 bg-gray-300\">\n </div>\n <div class=\"relative ml-6 -mt-16\">\n-<div class=\"w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500\">\n </div>\n </div>\n <div class=\"p-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0034.html",
-    "caption": "Elements: 34/111",
-    "diff": "--- \n+++ \n@@ -120,7 +120,7 @@\n <div class=\"w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500\">\n </div>\n </div>\n-<div class=\"p-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-6\">\n <div class=\"flex justify-between\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"flex justify-between items-center mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0035.html",
-    "caption": "Elements: 35/111",
-    "diff": "--- \n+++ \n@@ -121,7 +121,7 @@\n </div>\n </div>\n <div class=\"p-6\">\n-<div class=\"flex justify-between\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex justify-between\">\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"flex justify-between items-center mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h1 class=\"text-2xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0036.html",
-    "caption": "Elements: 36/111",
-    "diff": "--- \n+++ \n@@ -122,7 +122,7 @@\n </div>\n <div class=\"p-6\">\n <div class=\"flex justify-between\">\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <div class=\"flex justify-between items-center mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h1 class=\"text-2xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           Andrej Karpathy"
-  },
-  {
-    "file": "0037.html",
-    "caption": "Elements: 37/111",
-    "diff": "--- \n+++ \n@@ -123,7 +123,7 @@\n <div class=\"p-6\">\n <div class=\"flex justify-between\">\n <div>\n-<div class=\"flex justify-between items-center mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex justify-between items-center mb-2\">\n <h1 class=\"text-2xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           Andrej Karpathy\n          </h1>"
-  },
-  {
-    "file": "0038.html",
-    "caption": "Elements: 38/111",
-    "diff": "--- \n+++ \n@@ -124,7 +124,7 @@\n <div class=\"flex justify-between\">\n <div>\n <div class=\"flex justify-between items-center mb-2\">\n-<h1 class=\"text-2xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h1 class=\"text-2xl font-bold\">\n           Andrej Karpathy\n          </h1>\n <div class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0039.html",
-    "caption": "Elements: 39/111",
-    "diff": "--- \n+++ \n@@ -127,7 +127,7 @@\n <h1 class=\"text-2xl font-bold\">\n           Andrej Karpathy\n          </h1>\n-<div class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"text-gray-500\">\n           ...\n          </div>\n </div>"
-  },
-  {
-    "file": "0040.html",
-    "caption": "Elements: 40/111",
-    "diff": "--- \n+++ \n@@ -131,7 +131,7 @@\n           ...\n          </div>\n </div>\n-<div class=\"flex items-center space-x-2 text-gray-700 mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2 text-gray-700 mb-2\">\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">\n           San Francisco, California, United States\n          </span>"
-  },
-  {
-    "file": "0041.html",
-    "caption": "Elements: 41/111",
-    "diff": "--- \n+++ \n@@ -132,7 +132,7 @@\n          </div>\n </div>\n <div class=\"flex items-center space-x-2 text-gray-700 mb-2\">\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n           San Francisco, California, United States\n          </span>\n <span class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0042.html",
-    "caption": "Elements: 42/111",
-    "diff": "--- \n+++ \n@@ -135,7 +135,7 @@\n <span>\n           San Francisco, California, United States\n          </span>\n-<span class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-gray-500\">\n           ·\n          </span>\n <a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0043.html",
-    "caption": "Elements: 43/111",
-    "diff": "--- \n+++ \n@@ -138,7 +138,7 @@\n <span class=\"text-gray-500\">\n           ·\n          </span>\n-<a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-blue-600\" href=\"#\">\n           Contact Info\n          </a>\n </div>"
-  },
-  {
-    "file": "0044.html",
-    "caption": "Elements: 44/111",
-    "diff": "--- \n+++ \n@@ -142,7 +142,7 @@\n           Contact Info\n          </a>\n </div>\n-<div class=\"flex items-center space-x-2 text-gray-600 mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2 text-gray-600 mb-4\">\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">\n           80K followers\n          </span>"
-  },
-  {
-    "file": "0045.html",
-    "caption": "Elements: 45/111",
-    "diff": "--- \n+++ \n@@ -143,7 +143,7 @@\n          </a>\n </div>\n <div class=\"flex items-center space-x-2 text-gray-600 mb-4\">\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n           80K followers\n          </span>\n <span class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0046.html",
-    "caption": "Elements: 46/111",
-    "diff": "--- \n+++ \n@@ -146,7 +146,7 @@\n <span>\n           80K followers\n          </span>\n-<span class=\"text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span class=\"text-gray-500\">\n           ·\n          </span>\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0047.html",
-    "caption": "Elements: 47/111",
-    "diff": "--- \n+++ \n@@ -149,7 +149,7 @@\n <span class=\"text-gray-500\">\n           ·\n          </span>\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n           280 connections\n          </span>\n </div>"
-  },
-  {
-    "file": "0048.html",
-    "caption": "Elements: 48/111",
-    "diff": "--- \n+++ \n@@ -153,7 +153,7 @@\n           280 connections\n          </span>\n </div>\n-<div class=\"flex items-center space-x-2 mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2 mb-4\">\n <div class=\"flex space-x-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0049.html",
-    "caption": "Elements: 49/111",
-    "diff": "--- \n+++ \n@@ -154,7 +154,7 @@\n          </span>\n </div>\n <div class=\"flex items-center space-x-2 mb-4\">\n-<div class=\"flex space-x-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex space-x-1\">\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0050.html",
-    "caption": "Elements: 50/111",
-    "diff": "--- \n+++ \n@@ -155,7 +155,7 @@\n </div>\n <div class=\"flex items-center space-x-2 mb-4\">\n <div class=\"flex space-x-1\">\n-<div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0051.html",
-    "caption": "Elements: 51/111",
-    "diff": "--- \n+++ \n@@ -157,7 +157,7 @@\n <div class=\"flex space-x-1\">\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n-<div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0052.html",
-    "caption": "Elements: 52/111",
-    "diff": "--- \n+++ \n@@ -159,7 +159,7 @@\n </div>\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n-<div class=\"w-8 h-8 bg-gray-400 rounded-full\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n </div>\n <a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0053.html",
-    "caption": "Elements: 53/111",
-    "diff": "--- \n+++ \n@@ -162,7 +162,7 @@\n <div class=\"w-8 h-8 bg-gray-400 rounded-full\">\n </div>\n </div>\n-<a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-blue-600\" href=\"#\">\n           See your mutual connections\n          </a>\n </div>"
-  },
-  {
-    "file": "0054.html",
-    "caption": "Elements: 54/111",
-    "diff": "--- \n+++ \n@@ -166,7 +166,7 @@\n           See your mutual connections\n          </a>\n </div>\n-<div class=\"flex space-x-4 mb-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex space-x-4 mb-6\">\n <button class=\"bg-blue-600 text-white px-5 py-2 rounded-md\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           Join to view profile\n          </button>"
-  },
-  {
-    "file": "0055.html",
-    "caption": "Elements: 55/111",
-    "diff": "--- \n+++ \n@@ -167,7 +167,7 @@\n          </a>\n </div>\n <div class=\"flex space-x-4 mb-6\">\n-<button class=\"bg-blue-600 text-white px-5 py-2 rounded-md\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"bg-blue-600 text-white px-5 py-2 rounded-md\">\n           Join to view profile\n          </button>\n <button class=\"border border-blue-600 text-blue-600 px-5 py-2 rounded-md\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0056.html",
-    "caption": "Elements: 56/111",
-    "diff": "--- \n+++ \n@@ -170,7 +170,7 @@\n <button class=\"bg-blue-600 text-white px-5 py-2 rounded-md\">\n           Join to view profile\n          </button>\n-<button class=\"border border-blue-600 text-blue-600 px-5 py-2 rounded-md\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"border border-blue-600 text-blue-600 px-5 py-2 rounded-md\">\n           Message\n          </button>\n </div>"
-  },
-  {
-    "file": "0057.html",
-    "caption": "Elements: 57/111",
-    "diff": "--- \n+++ \n@@ -175,7 +175,7 @@\n          </button>\n </div>\n </div>\n-<div class=\"flex flex-col space-y-6\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex flex-col space-y-6\">\n <div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0058.html",
-    "caption": "Elements: 58/111",
-    "diff": "--- \n+++ \n@@ -176,7 +176,7 @@\n </div>\n </div>\n <div class=\"flex flex-col space-y-6\">\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-gray-400\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0059.html",
-    "caption": "Elements: 59/111",
-    "diff": "--- \n+++ \n@@ -177,7 +177,7 @@\n </div>\n <div class=\"flex flex-col space-y-6\">\n <div class=\"flex items-center space-x-2\">\n-<div class=\"w-6 h-6 bg-gray-400\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400\">\n </div>\n <a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           Tesla"
-  },
-  {
-    "file": "0060.html",
-    "caption": "Elements: 60/111",
-    "diff": "--- \n+++ \n@@ -179,7 +179,7 @@\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-gray-400\">\n </div>\n-<a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-lg text-blue-600\" href=\"#\">\n           Tesla\n          </a>\n </div>"
-  },
-  {
-    "file": "0061.html",
-    "caption": "Elements: 61/111",
-    "diff": "--- \n+++ \n@@ -183,7 +183,7 @@\n           Tesla\n          </a>\n </div>\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-gray-400\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0062.html",
-    "caption": "Elements: 62/111",
-    "diff": "--- \n+++ \n@@ -184,7 +184,7 @@\n          </a>\n </div>\n <div class=\"flex items-center space-x-2\">\n-<div class=\"w-6 h-6 bg-gray-400\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400\">\n </div>\n <a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           Stanford University"
-  },
-  {
-    "file": "0063.html",
-    "caption": "Elements: 63/111",
-    "diff": "--- \n+++ \n@@ -186,7 +186,7 @@\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-gray-400\">\n </div>\n-<a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-lg text-blue-600\" href=\"#\">\n           Stanford University\n          </a>\n </div>"
-  },
-  {
-    "file": "0064.html",
-    "caption": "Elements: 64/111",
-    "diff": "--- \n+++ \n@@ -190,7 +190,7 @@\n           Stanford University\n          </a>\n </div>\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           🔗 Personal Website\n          </a>"
-  },
-  {
-    "file": "0065.html",
-    "caption": "Elements: 65/111",
-    "diff": "--- \n+++ \n@@ -191,7 +191,7 @@\n          </a>\n </div>\n <div class=\"flex items-center space-x-2\">\n-<a class=\"text-lg text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-lg text-blue-600\" href=\"#\">\n           🔗 Personal Website\n          </a>\n </div>"
-  },
-  {
-    "file": "0066.html",
-    "caption": "Elements: 66/111",
-    "diff": "--- \n+++ \n@@ -197,7 +197,7 @@\n </div>\n </div>\n </div>\n-<div class=\"mt-8\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"mt-8\">\n <h2 class=\"text-xl font-bold mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n         About\n        </h2>"
-  },
-  {
-    "file": "0067.html",
-    "caption": "Elements: 67/111",
-    "diff": "--- \n+++ \n@@ -198,7 +198,7 @@\n </div>\n </div>\n <div class=\"mt-8\">\n-<h2 class=\"text-xl font-bold mb-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h2 class=\"text-xl font-bold mb-2\">\n         About\n        </h2>\n <div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0068.html",
-    "caption": "Elements: 68/111",
-    "diff": "--- \n+++ \n@@ -201,7 +201,7 @@\n <h2 class=\"text-xl font-bold mb-2\">\n         About\n        </h2>\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <span style=\"opacity:0;transition:opacity .35s ease-out;\">\n          https://karpathy.ai/\n         </span>"
-  },
-  {
-    "file": "0069.html",
-    "caption": "Elements: 69/111",
-    "diff": "--- \n+++ \n@@ -202,7 +202,7 @@\n         About\n        </h2>\n <div class=\"flex items-center space-x-2\">\n-<span style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<span>\n          https://karpathy.ai/\n         </span>\n <a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0070.html",
-    "caption": "Elements: 70/111",
-    "diff": "--- \n+++ \n@@ -205,7 +205,7 @@\n <span>\n          https://karpathy.ai/\n         </span>\n-<a class=\"text-blue-600\" href=\"#\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<a class=\"text-blue-600\" href=\"#\">\n          see more\n         </a>\n </div>"
-  },
-  {
-    "file": "0071.html",
-    "caption": "Elements: 71/111",
-    "diff": "--- \n+++ \n@@ -214,7 +214,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"3\" style=\"left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;\">\n-<h2 class=\"text-2xl font-bold mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h2 class=\"text-2xl font-bold mb-4\">\n      Other similar profiles\n     </h2>\n <div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0072.html",
-    "caption": "Elements: 72/111",
-    "diff": "--- \n+++ \n@@ -217,7 +217,7 @@\n <h2 class=\"text-2xl font-bold mb-4\">\n      Other similar profiles\n     </h2>\n-<div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0073.html",
-    "caption": "Elements: 73/111",
-    "diff": "--- \n+++ \n@@ -218,7 +218,7 @@\n      Other similar profiles\n     </h2>\n <div class=\"flex items-center mb-4\">\n-<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Manohar Paluri"
-  },
-  {
-    "file": "0074.html",
-    "caption": "Elements: 74/111",
-    "diff": "--- \n+++ \n@@ -219,7 +219,7 @@\n     </h2>\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Manohar Paluri\n       </h3>"
-  },
-  {
-    "file": "0075.html",
-    "caption": "Elements: 75/111",
-    "diff": "--- \n+++ \n@@ -220,7 +220,7 @@\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div>\n-<h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-lg font-semibold\">\n        Manohar Paluri\n       </h3>\n <p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0076.html",
-    "caption": "Elements: 76/111",
-    "diff": "--- \n+++ \n@@ -223,7 +223,7 @@\n <h3 class=\"text-lg font-semibold\">\n        Manohar Paluri\n       </h3>\n-<p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-600\">\n        Menlo Park, CA\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0077.html",
-    "caption": "Elements: 77/111",
-    "diff": "--- \n+++ \n@@ -226,7 +226,7 @@\n <p class=\"text-gray-600\">\n        Menlo Park, CA\n       </p>\n-<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0078.html",
-    "caption": "Elements: 78/111",
-    "diff": "--- \n+++ \n@@ -227,7 +227,7 @@\n        Menlo Park, CA\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n-<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0079.html",
-    "caption": "Elements: 79/111",
-    "diff": "--- \n+++ \n@@ -228,7 +228,7 @@\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n        Connect"
-  },
-  {
-    "file": "0080.html",
-    "caption": "Elements: 80/111",
-    "diff": "--- \n+++ \n@@ -235,7 +235,7 @@\n       </button>\n </div>\n </div>\n-<div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0081.html",
-    "caption": "Elements: 81/111",
-    "diff": "--- \n+++ \n@@ -236,7 +236,7 @@\n </div>\n </div>\n <div class=\"flex items-center mb-4\">\n-<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Renjun Xu, PhD"
-  },
-  {
-    "file": "0082.html",
-    "caption": "Elements: 82/111",
-    "diff": "--- \n+++ \n@@ -237,7 +237,7 @@\n </div>\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Renjun Xu, PhD\n       </h3>"
-  },
-  {
-    "file": "0083.html",
-    "caption": "Elements: 83/111",
-    "diff": "--- \n+++ \n@@ -238,7 +238,7 @@\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div>\n-<h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-lg font-semibold\">\n        Renjun Xu, PhD\n       </h3>\n <p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0084.html",
-    "caption": "Elements: 84/111",
-    "diff": "--- \n+++ \n@@ -241,7 +241,7 @@\n <h3 class=\"text-lg font-semibold\">\n        Renjun Xu, PhD\n       </h3>\n-<p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-600\">\n        San Francisco Bay Area\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0085.html",
-    "caption": "Elements: 85/111",
-    "diff": "--- \n+++ \n@@ -244,7 +244,7 @@\n <p class=\"text-gray-600\">\n        San Francisco Bay Area\n       </p>\n-<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0086.html",
-    "caption": "Elements: 86/111",
-    "diff": "--- \n+++ \n@@ -245,7 +245,7 @@\n        San Francisco Bay Area\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n-<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0087.html",
-    "caption": "Elements: 87/111",
-    "diff": "--- \n+++ \n@@ -246,7 +246,7 @@\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n        Connect"
-  },
-  {
-    "file": "0088.html",
-    "caption": "Elements: 88/111",
-    "diff": "--- \n+++ \n@@ -253,7 +253,7 @@\n       </button>\n </div>\n </div>\n-<div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0089.html",
-    "caption": "Elements: 89/111",
-    "diff": "--- \n+++ \n@@ -254,7 +254,7 @@\n </div>\n </div>\n <div class=\"flex items-center mb-4\">\n-<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Christopher Kanan"
-  },
-  {
-    "file": "0090.html",
-    "caption": "Elements: 90/111",
-    "diff": "--- \n+++ \n@@ -255,7 +255,7 @@\n </div>\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Christopher Kanan\n       </h3>"
-  },
-  {
-    "file": "0091.html",
-    "caption": "Elements: 91/111",
-    "diff": "--- \n+++ \n@@ -256,7 +256,7 @@\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div>\n-<h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-lg font-semibold\">\n        Christopher Kanan\n       </h3>\n <p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0092.html",
-    "caption": "Elements: 92/111",
-    "diff": "--- \n+++ \n@@ -259,7 +259,7 @@\n <h3 class=\"text-lg font-semibold\">\n        Christopher Kanan\n       </h3>\n-<p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-600\">\n        Rochester, New York Metropolitan Area\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0093.html",
-    "caption": "Elements: 93/111",
-    "diff": "--- \n+++ \n@@ -262,7 +262,7 @@\n <p class=\"text-gray-600\">\n        Rochester, New York Metropolitan Area\n       </p>\n-<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0094.html",
-    "caption": "Elements: 94/111",
-    "diff": "--- \n+++ \n@@ -263,7 +263,7 @@\n        Rochester, New York Metropolitan Area\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n-<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0095.html",
-    "caption": "Elements: 95/111",
-    "diff": "--- \n+++ \n@@ -264,7 +264,7 @@\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n        Connect"
-  },
-  {
-    "file": "0096.html",
-    "caption": "Elements: 96/111",
-    "diff": "--- \n+++ \n@@ -271,7 +271,7 @@\n       </button>\n </div>\n </div>\n-<div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0097.html",
-    "caption": "Elements: 97/111",
-    "diff": "--- \n+++ \n@@ -272,7 +272,7 @@\n </div>\n </div>\n <div class=\"flex items-center mb-4\">\n-<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Micael Carvalho"
-  },
-  {
-    "file": "0098.html",
-    "caption": "Elements: 98/111",
-    "diff": "--- \n+++ \n@@ -273,7 +273,7 @@\n </div>\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Micael Carvalho\n       </h3>"
-  },
-  {
-    "file": "0099.html",
-    "caption": "Elements: 99/111",
-    "diff": "--- \n+++ \n@@ -274,7 +274,7 @@\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div>\n-<h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-lg font-semibold\">\n        Micael Carvalho\n       </h3>\n <p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0100.html",
-    "caption": "Elements: 100/111",
-    "diff": "--- \n+++ \n@@ -277,7 +277,7 @@\n <h3 class=\"text-lg font-semibold\">\n        Micael Carvalho\n       </h3>\n-<p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-600\">\n        Menlo Park, CA\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0101.html",
-    "caption": "Elements: 101/111",
-    "diff": "--- \n+++ \n@@ -280,7 +280,7 @@\n <p class=\"text-gray-600\">\n        Menlo Park, CA\n       </p>\n-<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0102.html",
-    "caption": "Elements: 102/111",
-    "diff": "--- \n+++ \n@@ -281,7 +281,7 @@\n        Menlo Park, CA\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n-<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0103.html",
-    "caption": "Elements: 103/111",
-    "diff": "--- \n+++ \n@@ -282,7 +282,7 @@\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n        Connect"
-  },
-  {
-    "file": "0104.html",
-    "caption": "Elements: 104/111",
-    "diff": "--- \n+++ \n@@ -289,7 +289,7 @@\n       </button>\n </div>\n </div>\n-<div class=\"flex items-center mb-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0105.html",
-    "caption": "Elements: 105/111",
-    "diff": "--- \n+++ \n@@ -290,7 +290,7 @@\n </div>\n </div>\n <div class=\"flex items-center mb-4\">\n-<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Joel Tetreault"
-  },
-  {
-    "file": "0106.html",
-    "caption": "Elements: 106/111",
-    "diff": "--- \n+++ \n@@ -291,7 +291,7 @@\n </div>\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n-<div style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div>\n <h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n        Joel Tetreault\n       </h3>"
-  },
-  {
-    "file": "0107.html",
-    "caption": "Elements: 107/111",
-    "diff": "--- \n+++ \n@@ -292,7 +292,7 @@\n <div class=\"flex items-center mb-4\">\n <div class=\"w-12 h-12 bg-gray-400 rounded-full mr-4\"></div>\n <div>\n-<h3 class=\"text-lg font-semibold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-lg font-semibold\">\n        Joel Tetreault\n       </h3>\n <p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0108.html",
-    "caption": "Elements: 108/111",
-    "diff": "--- \n+++ \n@@ -295,7 +295,7 @@\n <h3 class=\"text-lg font-semibold\">\n        Joel Tetreault\n       </h3>\n-<p class=\"text-gray-600\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-gray-600\">\n        New York, NY\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0109.html",
-    "caption": "Elements: 109/111",
-    "diff": "--- \n+++ \n@@ -298,7 +298,7 @@\n <p class=\"text-gray-600\">\n        New York, NY\n       </p>\n-<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>"
-  },
-  {
-    "file": "0110.html",
-    "caption": "Elements: 110/111",
-    "diff": "--- \n+++ \n@@ -299,7 +299,7 @@\n        New York, NY\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n-<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n+<svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </path>\n </svg>"
-  },
-  {
-    "file": "0111.html",
-    "caption": "Elements: 111/111",
-    "diff": "--- \n+++ \n@@ -300,7 +300,7 @@\n       </p>\n <button class=\"mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n-<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<path d=\"M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n </path>\n </svg>\n        Connect"
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/demos/linkedin/original_linkedin.html b/screencoder/demo/public/demos/linkedin/original_linkedin.html
deleted file mode 100644
index a8bb2c1490d7754656b7d5bac20c7c7bf9d6936b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/linkedin/original_linkedin.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <title>
-   Bounding Boxes Layout
-  </title>
-  <style>
-   body, html {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-            .container { 
-                position: relative;
-                width: 100%;
-                height: 100%;
-                box-sizing: border-box;
-            }
-            .box {
-                position: absolute;
-                box-sizing: border-box;
-                overflow: hidden;
-            }
-            .box > .container {
-                display: grid;
-                width: 100%;
-                height: 100%;
-            }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
- </head>
- <body>
-  <div class="container">
-   <div class="box" id="1" style="left: 1.2594458438287155%; top: 5.851063829787234%; width: 97.22921914357683%; height: 7.801418439716312%;">
-    <div class="flex flex-row items-center justify-between">
-     <!-- LinkedIn Logo -->
-     <svg class="h-8 w-auto text-blue-600 mr-8" viewbox="0 0 100 24">
-      <text fill="blue" font-family="sans-serif" font-size="24" x="0" y="20">
-       Linked
-      </text>
-      <rect fill="blue" height="20" width="20" x="78" y="2">
-      </rect>
-      <text fill="white" font-family="sans-serif" font-size="20" x="80" y="18">
-       in
-      </text>
-     </svg>
-     <div class="flex flex-row items-center">
-      <!-- Top Content -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2v10l3-2 3 2v-10l-6-4-6 4v10l3-2 3 2V2z" fill="currentColor">
-         
-        </path>
-       </svg>
-       <span class="text-sm">
-        Top Content
-       </span>
-      </div>
-      <!-- People (with underline) -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-black border-b-2 border-black">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2a1 1 0 0 1 1 1v4h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1h2zm-2 6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5h2a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a1 1 0 0 1 1-1h2v3z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        People
-       </span>
-      </div>
-      <!-- Learning -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2v12l5-3-5-3-5 3 5 3V2zm0 14v6h2v-6h-2z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Learning
-       </span>
-      </div>
-      <!-- Jobs -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M12 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8zm0 14v-8h8v8h-8zm0-10a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V6z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Jobs
-       </span>
-      </div>
-      <!-- Games -->
-      <div class="flex flex-col items-center mx-4 cursor-pointer text-gray-600">
-       <svg class="h-8 w-8" viewbox="0 0 24 24">
-        <path d="M14 2h-4c-1.1 0-2 .9-2 2v4H6c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v4c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-4h4c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-4V4c0-1.1-.9-2-2-2zm-4 2h4v4h-4V4zm-2 10H6v-4h4v4zm8 0h-4v-4h4v4z" fill="currentColor">
-        </path>
-       </svg>
-       <span class="text-sm">
-        Games
-       </span>
-      </div>
-      <!-- Divider -->
-      <div class="border-l border-gray-300 h-6 mx-4">
-      </div>
-      <!-- Join now -->
-      <div class="text-black text-xl font-medium cursor-pointer mr-4">
-       Join now
-      </div>
-      <!-- Sign in button -->
-      <button class="border border-blue-600 text-blue-600 rounded-full px-4 py-2 bg-white cursor-pointer">
-       Sign in
-      </button>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="2" style="left: 1.2594458438287155%; top: 17.695035460992907%; width: 66.0369437447523%; height: 86.38297872340426%;">
-    <div class="bg-white shadow rounded">
-     <div class="w-full h-40 bg-gray-300">
-     </div>
-     <div class="relative ml-6 -mt-16">
-      <div class="w-32 h-32 bg-gray-400 rounded-full border-4 border-blue-500">
-      </div>
-     </div>
-     <div class="p-6">
-      <div class="flex justify-between">
-       <div>
-        <div class="flex justify-between items-center mb-2">
-         <h1 class="text-2xl font-bold">
-          Andrej Karpathy
-         </h1>
-         <div class="text-gray-500">
-          ...
-         </div>
-        </div>
-        <div class="flex items-center space-x-2 text-gray-700 mb-2">
-         <span>
-          San Francisco, California, United States
-         </span>
-         <span class="text-gray-500">
-          ·
-         </span>
-         <a class="text-blue-600" href="#">
-          Contact Info
-         </a>
-        </div>
-        <div class="flex items-center space-x-2 text-gray-600 mb-4">
-         <span>
-          80K followers
-         </span>
-         <span class="text-gray-500">
-          ·
-         </span>
-         <span>
-          280 connections
-         </span>
-        </div>
-        <div class="flex items-center space-x-2 mb-4">
-         <div class="flex space-x-1">
-          <div class="w-8 h-8 bg-gray-400 rounded-full">
-          </div>
-          <div class="w-8 h-8 bg-gray-400 rounded-full">
-          </div>
-          <div class="w-8 h-8 bg-gray-400 rounded-full">
-          </div>
-         </div>
-         <a class="text-blue-600" href="#">
-          See your mutual connections
-         </a>
-        </div>
-        <div class="flex space-x-4 mb-6">
-         <button class="bg-blue-600 text-white px-5 py-2 rounded-md">
-          Join to view profile
-         </button>
-         <button class="border border-blue-600 text-blue-600 px-5 py-2 rounded-md">
-          Message
-         </button>
-        </div>
-       </div>
-       <div class="flex flex-col space-y-6">
-        <div class="flex items-center space-x-2">
-         <div class="w-6 h-6 bg-gray-400">
-         </div>
-         <a class="text-lg text-blue-600" href="#">
-          Tesla
-         </a>
-        </div>
-        <div class="flex items-center space-x-2">
-         <div class="w-6 h-6 bg-gray-400">
-         </div>
-         <a class="text-lg text-blue-600" href="#">
-          Stanford University
-         </a>
-        </div>
-        <div class="flex items-center space-x-2">
-         <a class="text-lg text-blue-600" href="#">
-          🔗 Personal Website
-         </a>
-        </div>
-       </div>
-      </div>
-      <div class="mt-8">
-       <h2 class="text-xl font-bold mb-2">
-        About
-       </h2>
-       <div class="flex items-center space-x-2">
-        <span>
-         https://karpathy.ai/
-        </span>
-        <a class="text-blue-600" href="#">
-         see more
-        </a>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-   <div class="box" id="3" style="left: 68.68178001679262%; top: 17.695035460992907%; width: 29.80688497061293%; height: 86.38297872340426%;">
-    <h2 class="text-2xl font-bold mb-4">
-     Other similar profiles
-    </h2>
-    <div class="flex items-center mb-4">
-     <div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Manohar Paluri
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Renjun Xu, PhD
-      </h3>
-      <p class="text-gray-600">
-       San Francisco Bay Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Christopher Kanan
-      </h3>
-      <p class="text-gray-600">
-       Rochester, New York Metropolitan Area
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Micael Carvalho
-      </h3>
-      <p class="text-gray-600">
-       Menlo Park, CA
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-    <div class="flex items-center mb-4">
-     <div class="w-12 h-12 bg-gray-400 rounded-full mr-4"></div>
-     <div>
-      <h3 class="text-lg font-semibold">
-       Joel Tetreault
-      </h3>
-      <p class="text-gray-600">
-       New York, NY
-      </p>
-      <button class="mt-2 border border-gray-700 rounded-md px-4 py-2 flex items-center text-gray-700">
-       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        </path>
-       </svg>
-       Connect
-      </button>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0001.html b/screencoder/demo/public/demos/youtube-interface/0001.html
deleted file mode 100644
index 8c3fcee1822327a3f9bbdc6d43498a84e42b355b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0001.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0002.html b/screencoder/demo/public/demos/youtube-interface/0002.html
deleted file mode 100644
index abcbd0e026517612f1631354d3cd08a109b312b9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0002.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0003.html b/screencoder/demo/public/demos/youtube-interface/0003.html
deleted file mode 100644
index ac3ca8db91412571672d5ebbccfe6bae1b886028..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0003.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0004.html b/screencoder/demo/public/demos/youtube-interface/0004.html
deleted file mode 100644
index ca6046cff003ca66063874ab2b60464987fdb54f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0004.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0005.html b/screencoder/demo/public/demos/youtube-interface/0005.html
deleted file mode 100644
index 1f39e57649ed058e34214fe8826dd4aa92c8273a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0005.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0006.html b/screencoder/demo/public/demos/youtube-interface/0006.html
deleted file mode 100644
index 7840ddd77f3bc28f1bb7f5b66bccf4cfe755a2eb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0006.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0007.html b/screencoder/demo/public/demos/youtube-interface/0007.html
deleted file mode 100644
index 403f97d972fcd5ddbc9a8aa8e5d23c5f893e58ee..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0007.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0008.html b/screencoder/demo/public/demos/youtube-interface/0008.html
deleted file mode 100644
index 41b68727a312775bdf5a8ea3353ac39ade3c3b9e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0008.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0009.html b/screencoder/demo/public/demos/youtube-interface/0009.html
deleted file mode 100644
index 1391721cb17f3bd7b2376c4fc27456b50dd6f92b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0009.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0010.html b/screencoder/demo/public/demos/youtube-interface/0010.html
deleted file mode 100644
index 631f07c295de5ac909e3ffd317a7b95974d643b4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0010.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0011.html b/screencoder/demo/public/demos/youtube-interface/0011.html
deleted file mode 100644
index 84b3ab1bfd16f5e44db778a45a69e4b8545def68..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0011.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0012.html b/screencoder/demo/public/demos/youtube-interface/0012.html
deleted file mode 100644
index 3a4c3431692596d34751481f3446b4c441c629e6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0012.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0013.html b/screencoder/demo/public/demos/youtube-interface/0013.html
deleted file mode 100644
index fe0d518b0cae8a1bb388bae2303a2bcd1651c1d6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0013.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0014.html b/screencoder/demo/public/demos/youtube-interface/0014.html
deleted file mode 100644
index ae54834e86027850f12809da13dcb475e58ffc4b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0014.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0015.html b/screencoder/demo/public/demos/youtube-interface/0015.html
deleted file mode 100644
index 40569c18fb80cd876d2be43c5137305f9e103654..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0015.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" style="opacity:0;transition:opacity .35s ease-out;" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0016.html b/screencoder/demo/public/demos/youtube-interface/0016.html
deleted file mode 100644
index ec7f690e08b8e43b14c968802e971d4d7bc73557..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0016.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0017.html b/screencoder/demo/public/demos/youtube-interface/0017.html
deleted file mode 100644
index b08356766c91f151be16009cf7f74832c07cd8db..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0017.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0018.html b/screencoder/demo/public/demos/youtube-interface/0018.html
deleted file mode 100644
index fe316f1c381669ee4e9348e3c00d0540e4a854ca..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0018.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0019.html b/screencoder/demo/public/demos/youtube-interface/0019.html
deleted file mode 100644
index 1c6e7128f96be4dc9032dc18463f674d3fcd53fe..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0019.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0020.html b/screencoder/demo/public/demos/youtube-interface/0020.html
deleted file mode 100644
index fee7658787dfd3c08c149df6e951b22d619b4fd6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0020.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4" style="opacity:0;transition:opacity .35s ease-out;"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0021.html b/screencoder/demo/public/demos/youtube-interface/0021.html
deleted file mode 100644
index a5c80a0b7188808cf0956cc918c7d83bbe9b3a8c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0021.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0022.html b/screencoder/demo/public/demos/youtube-interface/0022.html
deleted file mode 100644
index e5a28e884fc368602ff3feff88661d61ca1246ac..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0022.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text" style="opacity:0;transition:opacity .35s ease-out;">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0023.html b/screencoder/demo/public/demos/youtube-interface/0023.html
deleted file mode 100644
index f1f8692c903390d797aff99b95c82603de87176e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0023.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0024.html b/screencoder/demo/public/demos/youtube-interface/0024.html
deleted file mode 100644
index ab17e02c108c6673aca2702a518d93bd94dcd114..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0024.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0025.html b/screencoder/demo/public/demos/youtube-interface/0025.html
deleted file mode 100644
index b9a2241691f6aeaf99b6e32396d9d7a3d7270861..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0025.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0026.html b/screencoder/demo/public/demos/youtube-interface/0026.html
deleted file mode 100644
index 55f11dae321ffe99f777cd75a0d7a4e8f9a8b5bc..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0026.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" style="opacity:0;transition:opacity .35s ease-out;" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0027.html b/screencoder/demo/public/demos/youtube-interface/0027.html
deleted file mode 100644
index 12d9401e8a37eaf1dedbcd5cadf46d875992b53e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0027.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42" style="opacity:0;transition:opacity .35s ease-out;"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0028.html b/screencoder/demo/public/demos/youtube-interface/0028.html
deleted file mode 100644
index 2e7cc4a73e5ade7347a1de4b29c0bd3987b1e8cb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0028.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold" style="opacity:0;transition:opacity .35s ease-out;">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0029.html b/screencoder/demo/public/demos/youtube-interface/0029.html
deleted file mode 100644
index 6bfc4aa45958b9d60786b39697dcbc2ea546c4fa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0029.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0030.html b/screencoder/demo/public/demos/youtube-interface/0030.html
deleted file mode 100644
index a768aac969016bef9faee70ade397b0147435269..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0030.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow" style="opacity:0;transition:opacity .35s ease-out;">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0031.html b/screencoder/demo/public/demos/youtube-interface/0031.html
deleted file mode 100644
index 017cee02a483ce9e1db13e7f325971e04149324b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0031.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" style="opacity:0;transition:opacity .35s ease-out;" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0032.html b/screencoder/demo/public/demos/youtube-interface/0032.html
deleted file mode 100644
index 768df303d356cb35af35f73d4523684c05b1c414..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0032.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0033.html b/screencoder/demo/public/demos/youtube-interface/0033.html
deleted file mode 100644
index 07894b13b8ac1be4e32cc355262f4499ca4b02a1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0033.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0034.html b/screencoder/demo/public/demos/youtube-interface/0034.html
deleted file mode 100644
index 6406834802e3ac2724e45cc5d46d15ff64618619..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0034.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0035.html b/screencoder/demo/public/demos/youtube-interface/0035.html
deleted file mode 100644
index fc751a6454280971c68b8b452792fe3b3b69596e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0035.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0036.html b/screencoder/demo/public/demos/youtube-interface/0036.html
deleted file mode 100644
index 92f9b34985eedda257a484411152f046caa04035..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0036.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0037.html b/screencoder/demo/public/demos/youtube-interface/0037.html
deleted file mode 100644
index a91af43ae6d8d54d0b7822cdbb6e6a0b4afae040..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0037.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0038.html b/screencoder/demo/public/demos/youtube-interface/0038.html
deleted file mode 100644
index 2bb39e58faad154a83ee17c78c787a942056bacb..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0038.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0039.html b/screencoder/demo/public/demos/youtube-interface/0039.html
deleted file mode 100644
index 3a26c359f2e7f88a687b26500c9fa1053f6c3671..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0039.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0040.html b/screencoder/demo/public/demos/youtube-interface/0040.html
deleted file mode 100644
index 9d223851fed5ee88a6fd882eb0d9adf11cf6a436..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0040.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0041.html b/screencoder/demo/public/demos/youtube-interface/0041.html
deleted file mode 100644
index b4570b950d73a8c2f0bd07e46813e2ea427d7513..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0041.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4" style="opacity:0;transition:opacity .35s ease-out;">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0042.html b/screencoder/demo/public/demos/youtube-interface/0042.html
deleted file mode 100644
index bcb9fd6728abc87e370f74e75714854018a34cfe..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0042.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0043.html b/screencoder/demo/public/demos/youtube-interface/0043.html
deleted file mode 100644
index c6f09b2787b040bcc9ae1de05e6f3c8275e109b4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0043.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0044.html b/screencoder/demo/public/demos/youtube-interface/0044.html
deleted file mode 100644
index 302a7f69d3d8149d7ac20d5a81a55bdff9cf398c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0044.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0045.html b/screencoder/demo/public/demos/youtube-interface/0045.html
deleted file mode 100644
index 99032ced7a65fca37cd2ea9f4d93bee4688592a7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0045.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" style="opacity:0;transition:opacity .35s ease-out;" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0046.html b/screencoder/demo/public/demos/youtube-interface/0046.html
deleted file mode 100644
index 75adbd0b7f66b09f77bd261d350e9a3aa6cb6be1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0046.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0047.html b/screencoder/demo/public/demos/youtube-interface/0047.html
deleted file mode 100644
index a37c6e81246da6f6e58eb5c5779a0b0f96ec2fa9..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0047.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100" style="opacity:0;transition:opacity .35s ease-out;">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0048.html b/screencoder/demo/public/demos/youtube-interface/0048.html
deleted file mode 100644
index 44b1a9cef60f0989d81651a1f405e9aba639d5d0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0048.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="opacity:0;transition:opacity .35s ease-out;" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0049.html b/screencoder/demo/public/demos/youtube-interface/0049.html
deleted file mode 100644
index 92af11d9e48faeb2e428c31f1036889d006bd1f8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0049.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5" style="opacity:0;transition:opacity .35s ease-out;"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0050.html b/screencoder/demo/public/demos/youtube-interface/0050.html
deleted file mode 100644
index 6a845b114f666e74039281c4e6eb7aaebed92310..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0050.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z" style="opacity:0;transition:opacity .35s ease-out;"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0051.html b/screencoder/demo/public/demos/youtube-interface/0051.html
deleted file mode 100644
index 9c919ebd58708e791c5935b0b693de4c6dfd85b1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0051.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center" style="opacity:0;transition:opacity .35s ease-out;">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0052.html b/screencoder/demo/public/demos/youtube-interface/0052.html
deleted file mode 100644
index 54e54566058c628db67900675e4378f33c453b22..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0052.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2" style="opacity:0;transition:opacity .35s ease-out;">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0053.html b/screencoder/demo/public/demos/youtube-interface/0053.html
deleted file mode 100644
index 7390bf043cd5d6d43c9776a17c732469f3874958..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0053.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0054.html b/screencoder/demo/public/demos/youtube-interface/0054.html
deleted file mode 100644
index 639a1d55b6b3ddb181ba55396eae7006a1b362e5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0054.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0055.html b/screencoder/demo/public/demos/youtube-interface/0055.html
deleted file mode 100644
index cc4b66a65605ca797ad60d8c1200b11114a2adb4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0055.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0056.html b/screencoder/demo/public/demos/youtube-interface/0056.html
deleted file mode 100644
index a5767299c2192334ca57442ec63fd50985230375..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0056.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0057.html b/screencoder/demo/public/demos/youtube-interface/0057.html
deleted file mode 100644
index 0a228f2a5ab88d6aa0984ed471a7494c00804a16..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0057.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0058.html b/screencoder/demo/public/demos/youtube-interface/0058.html
deleted file mode 100644
index f66eb4e8dccd75803885bc0bdddcce8e689a2170..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0058.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0059.html b/screencoder/demo/public/demos/youtube-interface/0059.html
deleted file mode 100644
index 2ed5c536c5322421a93960992581cb3b1c9dc564..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0059.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0060.html b/screencoder/demo/public/demos/youtube-interface/0060.html
deleted file mode 100644
index 0d09fa297e7ce096cad86d21bf572c38875adc4a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0060.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0061.html b/screencoder/demo/public/demos/youtube-interface/0061.html
deleted file mode 100644
index 223f4c810020aa371318a00bfbd90a811933fa06..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0061.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0062.html b/screencoder/demo/public/demos/youtube-interface/0062.html
deleted file mode 100644
index 9ea010d5dc6ff7dd01958c9722b67b0e26ed2fc8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0062.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium" style="opacity:0;transition:opacity .35s ease-out;">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0063.html b/screencoder/demo/public/demos/youtube-interface/0063.html
deleted file mode 100644
index bc8a0073500e8261e8661616708140ed91240d32..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0063.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0064.html b/screencoder/demo/public/demos/youtube-interface/0064.html
deleted file mode 100644
index 5016291cf97631654e85c057ac34450ac84621b3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0064.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0065.html b/screencoder/demo/public/demos/youtube-interface/0065.html
deleted file mode 100644
index e9040ab85ea919b655385a5273f9788b6f770726..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0065.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0066.html b/screencoder/demo/public/demos/youtube-interface/0066.html
deleted file mode 100644
index 8dc18b7039ff21e12d88fc24f5b6d59e53ddcb8b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0066.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0067.html b/screencoder/demo/public/demos/youtube-interface/0067.html
deleted file mode 100644
index 0584ea52ba59c94f59db7106533f0171a4ee4e62..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0067.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0068.html b/screencoder/demo/public/demos/youtube-interface/0068.html
deleted file mode 100644
index 99835c301b6ff2715e4144b445c2eb182381414f..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0068.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0069.html b/screencoder/demo/public/demos/youtube-interface/0069.html
deleted file mode 100644
index fbe87732e85643726969889e2649ca83c6c89a43..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0069.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0070.html b/screencoder/demo/public/demos/youtube-interface/0070.html
deleted file mode 100644
index a8fbe9d26787aa272d9feaf1b6baeb6c45268049..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0070.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0071.html b/screencoder/demo/public/demos/youtube-interface/0071.html
deleted file mode 100644
index b9fcf57ac96b44b7e64b08048210c936327d9c84..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0071.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0072.html b/screencoder/demo/public/demos/youtube-interface/0072.html
deleted file mode 100644
index d33a530a70fbbb4a7335b4b59f9db680cbdf08c5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0072.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0073.html b/screencoder/demo/public/demos/youtube-interface/0073.html
deleted file mode 100644
index dc4b4cdb41cce81c57ba21be56b575efb9eabf14..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0073.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0074.html b/screencoder/demo/public/demos/youtube-interface/0074.html
deleted file mode 100644
index f59c68cc3bbc78f448e729183385f8109a835696..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0074.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0075.html b/screencoder/demo/public/demos/youtube-interface/0075.html
deleted file mode 100644
index 08d9cf3996451ac6f9ff30a6974a1cc2386c9dc4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0075.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0076.html b/screencoder/demo/public/demos/youtube-interface/0076.html
deleted file mode 100644
index b21d59cfe403659f0fb547fae96f3e900b4c080c..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0076.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0077.html b/screencoder/demo/public/demos/youtube-interface/0077.html
deleted file mode 100644
index fa38852972fb06d01245b22f1e8ca2df597bdd25..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0077.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0078.html b/screencoder/demo/public/demos/youtube-interface/0078.html
deleted file mode 100644
index 6f32b8c885a07475d207e313514076b6f6e0bbac..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0078.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0079.html b/screencoder/demo/public/demos/youtube-interface/0079.html
deleted file mode 100644
index 8df8214a25b611b33ac5134060fe80d483e8c0ad..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0079.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0080.html b/screencoder/demo/public/demos/youtube-interface/0080.html
deleted file mode 100644
index ec2a3487465def1b627e646d4ac7b90c1f5044f1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0080.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0081.html b/screencoder/demo/public/demos/youtube-interface/0081.html
deleted file mode 100644
index 6048b07dd660e200787850c95098e7c5f9d08b87..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0081.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0082.html b/screencoder/demo/public/demos/youtube-interface/0082.html
deleted file mode 100644
index c19029adf07c3db4e628a142cb3f13fb6cf89e1b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0082.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0083.html b/screencoder/demo/public/demos/youtube-interface/0083.html
deleted file mode 100644
index 6055a5c8b0e85289ba7e5ff2cd1babc0658ace27..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0083.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0084.html b/screencoder/demo/public/demos/youtube-interface/0084.html
deleted file mode 100644
index 3fcdf8611e7ae1229357ced2db88a41e146213a0..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0084.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0085.html b/screencoder/demo/public/demos/youtube-interface/0085.html
deleted file mode 100644
index 6ef319319927208102d27e18b7ce2fe21407805a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0085.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0086.html b/screencoder/demo/public/demos/youtube-interface/0086.html
deleted file mode 100644
index 619dfe17a2843cb5a5642f55fb1cd9c6b76b71a1..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0086.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0087.html b/screencoder/demo/public/demos/youtube-interface/0087.html
deleted file mode 100644
index a1eff26ff7f72f155e851ba2f9b1250e74db20dd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0087.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0088.html b/screencoder/demo/public/demos/youtube-interface/0088.html
deleted file mode 100644
index 879d510a486dcf032081603a206f609070d9900e..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0088.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0089.html b/screencoder/demo/public/demos/youtube-interface/0089.html
deleted file mode 100644
index 8769c7f906f3c7550dbdbb0809f83bc56ad8dda3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0089.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0090.html b/screencoder/demo/public/demos/youtube-interface/0090.html
deleted file mode 100644
index f94f5b62750dd026430f50c346cf6bce8df65bf5..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0090.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0091.html b/screencoder/demo/public/demos/youtube-interface/0091.html
deleted file mode 100644
index e8fda9b8b6f5662372ba9e6310edc4c392ef7e1d..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0091.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0092.html b/screencoder/demo/public/demos/youtube-interface/0092.html
deleted file mode 100644
index ffcd1cf1ff29e2789f9b378e091c28e186881bc2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0092.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0093.html b/screencoder/demo/public/demos/youtube-interface/0093.html
deleted file mode 100644
index e8ca2e3532030ece3470cb8db9a7c1d4e4aacec7..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0093.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0094.html b/screencoder/demo/public/demos/youtube-interface/0094.html
deleted file mode 100644
index 1def6361c141c40c34ca21fcb45939b5d7dad411..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0094.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0095.html b/screencoder/demo/public/demos/youtube-interface/0095.html
deleted file mode 100644
index 027c0ec054475fe357949d8702f2b1a8023d547a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0095.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0096.html b/screencoder/demo/public/demos/youtube-interface/0096.html
deleted file mode 100644
index 4c2d601a982e8a1c9533f9b08fd605715fca1406..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0096.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0097.html b/screencoder/demo/public/demos/youtube-interface/0097.html
deleted file mode 100644
index 26b8d21617afe38c42b0d1aa417e2a0e1bf05242..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0097.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0098.html b/screencoder/demo/public/demos/youtube-interface/0098.html
deleted file mode 100644
index 4a9f6395ec41c4e010a2446c2f76d3af800ff2fe..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0098.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0099.html b/screencoder/demo/public/demos/youtube-interface/0099.html
deleted file mode 100644
index 200f37f50f3c57ad4e833190ada6e12990aa45b3..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0099.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0100.html b/screencoder/demo/public/demos/youtube-interface/0100.html
deleted file mode 100644
index 2c6464f5f1a070a6dda239aa2d51e9d46ce5bdd4..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0100.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0101.html b/screencoder/demo/public/demos/youtube-interface/0101.html
deleted file mode 100644
index ec9de0d0e5333e6161cdf670307afde75c45c1c8..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0101.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t" style="opacity:0;transition:opacity .35s ease-out;"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0102.html b/screencoder/demo/public/demos/youtube-interface/0102.html
deleted file mode 100644
index 1c4d16fd8f0010067436c3985f83f9455a0bf287..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0102.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex" style="opacity:0;transition:opacity .35s ease-out;">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0103.html b/screencoder/demo/public/demos/youtube-interface/0103.html
deleted file mode 100644
index aedd7e4f4f761036d8bbb8bb74a879a5974f9bd2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0103.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0104.html b/screencoder/demo/public/demos/youtube-interface/0104.html
deleted file mode 100644
index 0a77b311a126096ddda2f835d0ead495c8461b56..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0104.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0105.html b/screencoder/demo/public/demos/youtube-interface/0105.html
deleted file mode 100644
index a17808d50529790bad5aaaa8e89430cfd1aac28a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0105.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0106.html b/screencoder/demo/public/demos/youtube-interface/0106.html
deleted file mode 100644
index ef2a3e06e03da7a3531b44ff8b9864755d5c5d35..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0106.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0107.html b/screencoder/demo/public/demos/youtube-interface/0107.html
deleted file mode 100644
index ff864e2e3d6f818b74aade3c8599f6f3380c34fa..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0107.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0108.html b/screencoder/demo/public/demos/youtube-interface/0108.html
deleted file mode 100644
index 17f97c8481bfc89f8775d2e37366cec8a8dcea53..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0108.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 bg-gray-400 rounded-t"></div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0109.html b/screencoder/demo/public/demos/youtube-interface/0109.html
deleted file mode 100644
index 8ea3e2aad9e84d307f6578e2c3bd65a1a632fcb6..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0109.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2" style="opacity:0;transition:opacity .35s ease-out;">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0110.html b/screencoder/demo/public/demos/youtube-interface/0110.html
deleted file mode 100644
index 3f7c7aac2d5e8c5ad776fd0d1cb7e58e27284b06..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0110.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1" style="opacity:0;transition:opacity .35s ease-out;">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0111.html b/screencoder/demo/public/demos/youtube-interface/0111.html
deleted file mode 100644
index ad8ab7dae3ac9fd2cc10424ec19ab8c4c2fc7380..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0111.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium" style="opacity:0;transition:opacity .35s ease-out;">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0112.html b/screencoder/demo/public/demos/youtube-interface/0112.html
deleted file mode 100644
index 05bc54c0062f3805745c32066962630911599bab..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0112.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500" style="opacity:0;transition:opacity .35s ease-out;">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0113.html b/screencoder/demo/public/demos/youtube-interface/0113.html
deleted file mode 100644
index 308cd9dfb10a8d1dc5c6399f9e0435fef5d95c30..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0113.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold" style="opacity:0;transition:opacity .35s ease-out;">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/0114.html b/screencoder/demo/public/demos/youtube-interface/0114.html
deleted file mode 100644
index 1b719e4c98aded08e12c6c86b62c43236248bdfd..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/0114.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Bounding Boxes Layout</title>
-<style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-<!-- ───────────── 左侧竖栏 ───────────── -->
-<div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-<div class="sidebar-container">
-<!-- 汉堡菜单 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M4 6h16M4 12h16M4 18h16"></path>
-</svg>
-</div>
-<!-- 首页 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"></path>
-</svg>
-<span class="sidebar-text">首页</span>
-</div>
-<!-- Shorts -->
-<div class="sidebar-item">
-<!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"></path>
-<polygon fill="#fff" points="9 8 9 16 15 12"></polygon>
-</svg>
-<span class="sidebar-text">Shorts</span>
-</div>
-<!-- 订阅 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<rect height="12" rx="2" width="20" x="2" y="6"></rect>
-<polygon fill="#fff" points="10 9 16 12 10 15"></polygon>
-</svg>
-<span class="sidebar-text">订阅</span>
-</div>
-<!-- 我 -->
-<div class="sidebar-item">
-<svg class="sidebar-icon" fill="currentColor" viewbox="0 0 24 24">
-<circle cx="12" cy="8" r="4"></circle>
-<path d="M4 20a8 8 0 0116 0H4z"></path>
-</svg>
-<span class="sidebar-text">我</span>
-</div>
-</div>
-</div>
-<!-- ───────────── 顶部导航 ───────────── -->
-<div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-<div class="flex items-center">
-<!-- Logo -->
-<div class="flex items-center ml-4 space-x-1">
-<svg class="w-8 h-6" viewbox="0 0 90 60">
-<rect fill="#FF0000" height="60" rx="12" width="90"></rect>
-<polygon fill="#fff" points="36,18 60,30 36,42"></polygon>
-</svg>
-<span class="text-xl font-bold">YouTube</span>
-<span class="text-sm font-medium">HK</span>
-</div>
-<!-- 搜索 -->
-<div class="flex items-center mx-10 flex-grow">
-<input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-<button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path>
-</svg>
-</button>
-<!-- 语音搜索 -->
-<button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewbox="0 0 24 24">
-<path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"></path>
-<path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M12 17v4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-<path d="M8 21h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
-</svg>
-</button>
-</div>
-<!-- 创建 / 通知 / 头像 -->
-<div class="flex items-center mr-4 space-x-4">
-<!-- 创建(摄像机 +) -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
-<path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"></path>
-<rect fill="#fff" height="6" rx="1" width="6" x="9" y="9"></rect>
-<path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></path>
-</svg>
-</button>
-<!-- 通知铃铛 -->
-<button class="rounded-full p-2 hover:bg-gray-100">
-<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
-<path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"></path>
-<path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>
-</svg>
-</button>
-<!-- 头像 -->
-<div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-</div>
-</div>
-</div>
-<div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-<div class="flex items-center space-x-2">
-<span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-<span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-</div>
-</div>
-<div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-<div class="grid grid-cols-3 gap-4">
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_1.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-<p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_2.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-<p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_3.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-<p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_4.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-<p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_5.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-<p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-</div>
-</div>
-</div>
-<div class="relative bg-white rounded shadow">
-<div class="w-full h-48 overflow-hidden rounded-t">
-<img alt="Video thumbnail" class="w-full h-full object-cover" src="../../assets/demo1_cropped/demo1_6.png"/>
-</div>
-<div class="p-2 flex">
-<div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-</div>
-<div class="flex-1">
-<h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-<p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-</p>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>
-</body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/final_youtube.html b/screencoder/demo/public/demos/youtube-interface/final_youtube.html
deleted file mode 100644
index 6d5be4ca2f3150a2bc2170b001a8217d0965f81b..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/final_youtube.html
+++ /dev/null
@@ -1,259 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Bounding Boxes Layout</title>
-  <style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-
-  <!-- ───────────── 左侧竖栏 ───────────── -->
-  <div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-    <div class="sidebar-container">
-
-      <!-- 汉堡菜单 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-          <path d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </div>
-
-      <!-- 首页 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"/>
-        </svg>
-        <span class="sidebar-text">首页</span>
-      </div>
-
-      <!-- Shorts -->
-      <div class="sidebar-item">
-        <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"/>
-          <polygon fill="#fff" points="9 8 9 16 15 12"/>
-        </svg>
-        <span class="sidebar-text">Shorts</span>
-      </div>
-
-      <!-- 订阅 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <rect x="2" y="6" width="20" height="12" rx="2"></rect>
-          <polygon fill="#fff" points="10 9 16 12 10 15"/>
-        </svg>
-        <span class="sidebar-text">订阅</span>
-      </div>
-
-      <!-- 我 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="12" cy="8" r="4"></circle>
-          <path d="M4 20a8 8 0 0116 0H4z"></path>
-        </svg>
-        <span class="sidebar-text">我</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- ───────────── 顶部导航 ───────────── -->
-  <div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-    <div class="flex items-center">
-
-      <!-- Logo -->
-      <div class="flex items-center ml-4 space-x-1">
-        <svg class="w-8 h-6" viewBox="0 0 90 60">
-          <rect width="90" height="60" rx="12" fill="#FF0000"></rect>
-          <polygon points="36,18 60,30 36,42" fill="#fff"></polygon>
-        </svg>
-        <span class="text-xl font-bold">YouTube</span>
-        <span class="text-sm font-medium">HK</span>
-      </div>
-
-      <!-- 搜索 -->
-      <div class="flex items-center mx-10 flex-grow">
-        <input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-        <button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-          <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"/>
-          </svg>
-        </button>
-        <!-- 语音搜索 -->
-        <button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-          <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"/>
-            <path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12 17v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M8 21h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- 创建 / 通知 / 头像 -->
-      <div class="flex items-center mr-4 space-x-4">
-
-        <!-- 创建(摄像机 +) -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"/>
-            <rect x="9" y="9" width="6" height="6" rx="1" fill="#fff"/>
-            <path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-
-        <!-- 通知铃铛 -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"/>
-            <path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"/>
-          </svg>
-        </button>
-
-        <!-- 头像 -->
-        <div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-      </div>
-    </div>
-  </div>
-  <div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-    <div class="flex items-center space-x-2">
-      <span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-    </div>
-  </div>
-   <div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-    <div class="grid grid-cols-3 gap-4">
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_1.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-        <p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_2.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-        <p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_3.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-        <p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_4.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-        <p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_5.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-        <p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 overflow-hidden rounded-t">
-        <img src="../../assets/demo1_cropped/demo1_6.png" class="w-full h-full object-cover" alt="Video thumbnail">
-      </div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-        <p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-        </p>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/public/demos/youtube-interface/manifest.json b/screencoder/demo/public/demos/youtube-interface/manifest.json
deleted file mode 100644
index 2b29405e2da2d42ea57f90f646f7b0d4e24ed39a..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/manifest.json
+++ /dev/null
@@ -1,542 +0,0 @@
-[
-  {
-    "file": "0001.html",
-    "caption": "Elements: 1/108",
-    "diff": ""
-  },
-  {
-    "file": "0002.html",
-    "caption": "Elements: 2/108",
-    "diff": "--- \n+++ \n@@ -24,7 +24,7 @@\n <div class=\"box\" id=\"1\" style=\"left:0.5%;top:0%;width:2.6722%;height:99.7661%;\">\n <div class=\"sidebar-container\">\n <!-- 汉堡菜单 -->\n-<div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M4 6h16M4 12h16M4 18h16\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0003.html",
-    "caption": "Elements: 3/108",
-    "diff": "--- \n+++ \n@@ -25,7 +25,7 @@\n <div class=\"sidebar-container\">\n <!-- 汉堡菜单 -->\n <div class=\"sidebar-item\">\n-<svg class=\"sidebar-icon\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"sidebar-icon\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n <path d=\"M4 6h16M4 12h16M4 18h16\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n </div>"
-  },
-  {
-    "file": "0004.html",
-    "caption": "Elements: 4/108",
-    "diff": "--- \n+++ \n@@ -26,7 +26,7 @@\n <!-- 汉堡菜单 -->\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n-<path d=\"M4 6h16M4 12h16M4 18h16\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M4 6h16M4 12h16M4 18h16\"></path>\n </svg>\n </div>\n <!-- 首页 -->"
-  },
-  {
-    "file": "0005.html",
-    "caption": "Elements: 5/108",
-    "diff": "--- \n+++ \n@@ -30,7 +30,7 @@\n </svg>\n </div>\n <!-- 首页 -->\n-<div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0006.html",
-    "caption": "Elements: 6/108",
-    "diff": "--- \n+++ \n@@ -31,7 +31,7 @@\n </div>\n <!-- 首页 -->\n <div class=\"sidebar-item\">\n-<svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">首页</span>"
-  },
-  {
-    "file": "0007.html",
-    "caption": "Elements: 7/108",
-    "diff": "--- \n+++ \n@@ -32,7 +32,7 @@\n <!-- 首页 -->\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<path d=\"M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z\"></path>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">首页</span>\n </div>"
-  },
-  {
-    "file": "0008.html",
-    "caption": "Elements: 8/108",
-    "diff": "--- \n+++ \n@@ -34,7 +34,7 @@\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z\"></path>\n </svg>\n-<span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">首页</span>\n+<span class=\"sidebar-text\">首页</span>\n </div>\n <!-- Shorts -->\n <div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0009.html",
-    "caption": "Elements: 9/108",
-    "diff": "--- \n+++ \n@@ -37,7 +37,7 @@\n <span class=\"sidebar-text\">首页</span>\n </div>\n <!-- Shorts -->\n-<div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"sidebar-item\">\n <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->\n <svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0010.html",
-    "caption": "Elements: 10/108",
-    "diff": "--- \n+++ \n@@ -39,7 +39,7 @@\n <!-- Shorts -->\n <div class=\"sidebar-item\">\n <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->\n-<svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <polygon fill=\"#fff\" points=\"9 8 9 16 15 12\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>"
-  },
-  {
-    "file": "0011.html",
-    "caption": "Elements: 11/108",
-    "diff": "--- \n+++ \n@@ -40,7 +40,7 @@\n <div class=\"sidebar-item\">\n <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\"></path>\n <polygon fill=\"#fff\" points=\"9 8 9 16 15 12\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">Shorts</span>"
-  },
-  {
-    "file": "0012.html",
-    "caption": "Elements: 12/108",
-    "diff": "--- \n+++ \n@@ -41,7 +41,7 @@\n <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\"></path>\n-<polygon fill=\"#fff\" points=\"9 8 9 16 15 12\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n+<polygon fill=\"#fff\" points=\"9 8 9 16 15 12\"></polygon>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">Shorts</span>\n </div>"
-  },
-  {
-    "file": "0013.html",
-    "caption": "Elements: 13/108",
-    "diff": "--- \n+++ \n@@ -43,7 +43,7 @@\n <path d=\"M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z\"></path>\n <polygon fill=\"#fff\" points=\"9 8 9 16 15 12\"></polygon>\n </svg>\n-<span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">Shorts</span>\n+<span class=\"sidebar-text\">Shorts</span>\n </div>\n <!-- 订阅 -->\n <div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0014.html",
-    "caption": "Elements: 14/108",
-    "diff": "--- \n+++ \n@@ -46,7 +46,7 @@\n <span class=\"sidebar-text\">Shorts</span>\n </div>\n <!-- 订阅 -->\n-<div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <rect height=\"12\" rx=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"20\" x=\"2\" y=\"6\"></rect>\n <polygon fill=\"#fff\" points=\"10 9 16 12 10 15\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>"
-  },
-  {
-    "file": "0015.html",
-    "caption": "Elements: 15/108",
-    "diff": "--- \n+++ \n@@ -47,7 +47,7 @@\n </div>\n <!-- 订阅 -->\n <div class=\"sidebar-item\">\n-<svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <rect height=\"12\" rx=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"20\" x=\"2\" y=\"6\"></rect>\n <polygon fill=\"#fff\" points=\"10 9 16 12 10 15\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>"
-  },
-  {
-    "file": "0016.html",
-    "caption": "Elements: 16/108",
-    "diff": "--- \n+++ \n@@ -48,7 +48,7 @@\n <!-- 订阅 -->\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<rect height=\"12\" rx=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"20\" x=\"2\" y=\"6\"></rect>\n+<rect height=\"12\" rx=\"2\" width=\"20\" x=\"2\" y=\"6\"></rect>\n <polygon fill=\"#fff\" points=\"10 9 16 12 10 15\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">订阅</span>"
-  },
-  {
-    "file": "0017.html",
-    "caption": "Elements: 17/108",
-    "diff": "--- \n+++ \n@@ -49,7 +49,7 @@\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <rect height=\"12\" rx=\"2\" width=\"20\" x=\"2\" y=\"6\"></rect>\n-<polygon fill=\"#fff\" points=\"10 9 16 12 10 15\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n+<polygon fill=\"#fff\" points=\"10 9 16 12 10 15\"></polygon>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">订阅</span>\n </div>"
-  },
-  {
-    "file": "0018.html",
-    "caption": "Elements: 18/108",
-    "diff": "--- \n+++ \n@@ -51,7 +51,7 @@\n <rect height=\"12\" rx=\"2\" width=\"20\" x=\"2\" y=\"6\"></rect>\n <polygon fill=\"#fff\" points=\"10 9 16 12 10 15\"></polygon>\n </svg>\n-<span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">订阅</span>\n+<span class=\"sidebar-text\">订阅</span>\n </div>\n <!-- 我 -->\n <div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0019.html",
-    "caption": "Elements: 19/108",
-    "diff": "--- \n+++ \n@@ -54,7 +54,7 @@\n <span class=\"sidebar-text\">订阅</span>\n </div>\n <!-- 我 -->\n-<div class=\"sidebar-item\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"8\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></circle>\n <path d=\"M4 20a8 8 0 0116 0H4z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0020.html",
-    "caption": "Elements: 20/108",
-    "diff": "--- \n+++ \n@@ -55,7 +55,7 @@\n </div>\n <!-- 我 -->\n <div class=\"sidebar-item\">\n-<svg class=\"sidebar-icon\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"8\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></circle>\n <path d=\"M4 20a8 8 0 0116 0H4z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0021.html",
-    "caption": "Elements: 21/108",
-    "diff": "--- \n+++ \n@@ -56,7 +56,7 @@\n <!-- 我 -->\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<circle cx=\"12\" cy=\"8\" r=\"4\" style=\"opacity:0;transition:opacity .35s ease-out;\"></circle>\n+<circle cx=\"12\" cy=\"8\" r=\"4\"></circle>\n <path d=\"M4 20a8 8 0 0116 0H4z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">我</span>"
-  },
-  {
-    "file": "0022.html",
-    "caption": "Elements: 22/108",
-    "diff": "--- \n+++ \n@@ -57,7 +57,7 @@\n <div class=\"sidebar-item\">\n <svg class=\"sidebar-icon\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"8\" r=\"4\"></circle>\n-<path d=\"M4 20a8 8 0 0116 0H4z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M4 20a8 8 0 0116 0H4z\"></path>\n </svg>\n <span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">我</span>\n </div>"
-  },
-  {
-    "file": "0023.html",
-    "caption": "Elements: 23/108",
-    "diff": "--- \n+++ \n@@ -59,7 +59,7 @@\n <circle cx=\"12\" cy=\"8\" r=\"4\"></circle>\n <path d=\"M4 20a8 8 0 0116 0H4z\"></path>\n </svg>\n-<span class=\"sidebar-text\" style=\"opacity:0;transition:opacity .35s ease-out;\">我</span>\n+<span class=\"sidebar-text\">我</span>\n </div>\n </div>\n </div>"
-  },
-  {
-    "file": "0024.html",
-    "caption": "Elements: 24/108",
-    "diff": "--- \n+++ \n@@ -65,7 +65,7 @@\n </div>\n <!-- ───────────── 顶部导航 ───────────── -->\n <div class=\"box\" id=\"2\" style=\"left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;\">\n-<div class=\"flex items-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center\">\n <!-- Logo -->\n <div class=\"flex items-center ml-4 space-x-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-8 h-6\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 90 60\">"
-  },
-  {
-    "file": "0025.html",
-    "caption": "Elements: 25/108",
-    "diff": "--- \n+++ \n@@ -67,7 +67,7 @@\n <div class=\"box\" id=\"2\" style=\"left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;\">\n <div class=\"flex items-center\">\n <!-- Logo -->\n-<div class=\"flex items-center ml-4 space-x-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center ml-4 space-x-1\">\n <svg class=\"w-8 h-6\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 90 60\">\n <rect fill=\"#FF0000\" height=\"60\" rx=\"12\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"90\"></rect>\n <polygon fill=\"#fff\" points=\"36,18 60,30 36,42\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>"
-  },
-  {
-    "file": "0026.html",
-    "caption": "Elements: 26/108",
-    "diff": "--- \n+++ \n@@ -68,7 +68,7 @@\n <div class=\"flex items-center\">\n <!-- Logo -->\n <div class=\"flex items-center ml-4 space-x-1\">\n-<svg class=\"w-8 h-6\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 90 60\">\n+<svg class=\"w-8 h-6\" viewbox=\"0 0 90 60\">\n <rect fill=\"#FF0000\" height=\"60\" rx=\"12\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"90\"></rect>\n <polygon fill=\"#fff\" points=\"36,18 60,30 36,42\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>"
-  },
-  {
-    "file": "0027.html",
-    "caption": "Elements: 27/108",
-    "diff": "--- \n+++ \n@@ -69,7 +69,7 @@\n <!-- Logo -->\n <div class=\"flex items-center ml-4 space-x-1\">\n <svg class=\"w-8 h-6\" viewbox=\"0 0 90 60\">\n-<rect fill=\"#FF0000\" height=\"60\" rx=\"12\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"90\"></rect>\n+<rect fill=\"#FF0000\" height=\"60\" rx=\"12\" width=\"90\"></rect>\n <polygon fill=\"#fff\" points=\"36,18 60,30 36,42\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n </svg>\n <span class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">YouTube</span>"
-  },
-  {
-    "file": "0028.html",
-    "caption": "Elements: 28/108",
-    "diff": "--- \n+++ \n@@ -70,7 +70,7 @@\n <div class=\"flex items-center ml-4 space-x-1\">\n <svg class=\"w-8 h-6\" viewbox=\"0 0 90 60\">\n <rect fill=\"#FF0000\" height=\"60\" rx=\"12\" width=\"90\"></rect>\n-<polygon fill=\"#fff\" points=\"36,18 60,30 36,42\" style=\"opacity:0;transition:opacity .35s ease-out;\"></polygon>\n+<polygon fill=\"#fff\" points=\"36,18 60,30 36,42\"></polygon>\n </svg>\n <span class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">YouTube</span>\n <span class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">HK</span>"
-  },
-  {
-    "file": "0029.html",
-    "caption": "Elements: 29/108",
-    "diff": "--- \n+++ \n@@ -72,7 +72,7 @@\n <rect fill=\"#FF0000\" height=\"60\" rx=\"12\" width=\"90\"></rect>\n <polygon fill=\"#fff\" points=\"36,18 60,30 36,42\"></polygon>\n </svg>\n-<span class=\"text-xl font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">YouTube</span>\n+<span class=\"text-xl font-bold\">YouTube</span>\n <span class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">HK</span>\n </div>\n <!-- 搜索 -->"
-  },
-  {
-    "file": "0030.html",
-    "caption": "Elements: 30/108",
-    "diff": "--- \n+++ \n@@ -73,7 +73,7 @@\n <polygon fill=\"#fff\" points=\"36,18 60,30 36,42\"></polygon>\n </svg>\n <span class=\"text-xl font-bold\">YouTube</span>\n-<span class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">HK</span>\n+<span class=\"text-sm font-medium\">HK</span>\n </div>\n <!-- 搜索 -->\n <div class=\"flex items-center mx-10 flex-grow\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0031.html",
-    "caption": "Elements: 31/108",
-    "diff": "--- \n+++ \n@@ -76,7 +76,7 @@\n <span class=\"text-sm font-medium\">HK</span>\n </div>\n <!-- 搜索 -->\n-<div class=\"flex items-center mx-10 flex-grow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mx-10 flex-grow\">\n <input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" style=\"opacity:0;transition:opacity .35s ease-out;\" type=\"text\"/>\n <button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">"
-  },
-  {
-    "file": "0032.html",
-    "caption": "Elements: 32/108",
-    "diff": "--- \n+++ \n@@ -77,7 +77,7 @@\n </div>\n <!-- 搜索 -->\n <div class=\"flex items-center mx-10 flex-grow\">\n-<input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" style=\"opacity:0;transition:opacity .35s ease-out;\" type=\"text\"/>\n+<input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" type=\"text\"/>\n <button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0033.html",
-    "caption": "Elements: 33/108",
-    "diff": "--- \n+++ \n@@ -78,7 +78,7 @@\n <!-- 搜索 -->\n <div class=\"flex items-center mx-10 flex-grow\">\n <input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" type=\"text\"/>\n-<button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0034.html",
-    "caption": "Elements: 34/108",
-    "diff": "--- \n+++ \n@@ -79,7 +79,7 @@\n <div class=\"flex items-center mx-10 flex-grow\">\n <input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" type=\"text\"/>\n <button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\">\n-<svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n <path d=\"M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0035.html",
-    "caption": "Elements: 35/108",
-    "diff": "--- \n+++ \n@@ -80,7 +80,7 @@\n <input class=\"border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full\" placeholder=\"搜索\" type=\"text\"/>\n <button class=\"border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n-<path d=\"M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z\"></path>\n </svg>\n </button>\n <!-- 语音搜索 -->"
-  },
-  {
-    "file": "0036.html",
-    "caption": "Elements: 36/108",
-    "diff": "--- \n+++ \n@@ -84,7 +84,7 @@\n </svg>\n </button>\n <!-- 语音搜索 -->\n-<button class=\"ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0037.html",
-    "caption": "Elements: 37/108",
-    "diff": "--- \n+++ \n@@ -85,7 +85,7 @@\n </button>\n <!-- 语音搜索 -->\n <button class=\"ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1\">\n-<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0038.html",
-    "caption": "Elements: 38/108",
-    "diff": "--- \n+++ \n@@ -86,7 +86,7 @@\n <!-- 语音搜索 -->\n <button class=\"ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\"></path>\n <path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M8 21h8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0039.html",
-    "caption": "Elements: 39/108",
-    "diff": "--- \n+++ \n@@ -87,7 +87,7 @@\n <button class=\"ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1\">\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\"></path>\n-<path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n <path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M8 21h8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0040.html",
-    "caption": "Elements: 40/108",
-    "diff": "--- \n+++ \n@@ -88,7 +88,7 @@\n <svg class=\"w-5 h-5 text-gray-700\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\"></path>\n <path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n-<path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n <path d=\"M8 21h8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0041.html",
-    "caption": "Elements: 41/108",
-    "diff": "--- \n+++ \n@@ -89,7 +89,7 @@\n <path d=\"M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z\"></path>\n <path d=\"M5 10a7 7 0 0014 0\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n <path d=\"M12 17v4\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n-<path d=\"M8 21h8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M8 21h8\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"></path>\n </svg>\n </button>\n </div>"
-  },
-  {
-    "file": "0042.html",
-    "caption": "Elements: 42/108",
-    "diff": "--- \n+++ \n@@ -94,7 +94,7 @@\n </button>\n </div>\n <!-- 创建 / 通知 / 头像 -->\n-<div class=\"flex items-center mr-4 space-x-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center mr-4 space-x-4\">\n <!-- 创建(摄像机 +) -->\n <button class=\"rounded-full p-2 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <svg class=\"h-6 w-6\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">"
-  },
-  {
-    "file": "0043.html",
-    "caption": "Elements: 43/108",
-    "diff": "--- \n+++ \n@@ -96,7 +96,7 @@\n <!-- 创建 / 通知 / 头像 -->\n <div class=\"flex items-center mr-4 space-x-4\">\n <!-- 创建(摄像机 +) -->\n-<button class=\"rounded-full p-2 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <rect fill=\"#fff\" height=\"6\" rx=\"1\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"6\" x=\"9\" y=\"9\"></rect>"
-  },
-  {
-    "file": "0044.html",
-    "caption": "Elements: 44/108",
-    "diff": "--- \n+++ \n@@ -97,7 +97,7 @@\n <div class=\"flex items-center mr-4 space-x-4\">\n <!-- 创建(摄像机 +) -->\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n-<svg class=\"h-6 w-6\" fill=\"currentColor\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-6 w-6\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <rect fill=\"#fff\" height=\"6\" rx=\"1\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"6\" x=\"9\" y=\"9\"></rect>\n <path d=\"M12 10v4M10 12h4\" stroke=\"#FF0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0045.html",
-    "caption": "Elements: 45/108",
-    "diff": "--- \n+++ \n@@ -98,7 +98,7 @@\n <!-- 创建(摄像机 +) -->\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n-<path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\"></path>\n <rect fill=\"#fff\" height=\"6\" rx=\"1\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"6\" x=\"9\" y=\"9\"></rect>\n <path d=\"M12 10v4M10 12h4\" stroke=\"#FF0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0046.html",
-    "caption": "Elements: 46/108",
-    "diff": "--- \n+++ \n@@ -99,7 +99,7 @@\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\"></path>\n-<rect fill=\"#fff\" height=\"6\" rx=\"1\" style=\"opacity:0;transition:opacity .35s ease-out;\" width=\"6\" x=\"9\" y=\"9\"></rect>\n+<rect fill=\"#fff\" height=\"6\" rx=\"1\" width=\"6\" x=\"9\" y=\"9\"></rect>\n <path d=\"M12 10v4M10 12h4\" stroke=\"#FF0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0047.html",
-    "caption": "Elements: 47/108",
-    "diff": "--- \n+++ \n@@ -100,7 +100,7 @@\n <svg class=\"h-6 w-6\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z\"></path>\n <rect fill=\"#fff\" height=\"6\" rx=\"1\" width=\"6\" x=\"9\" y=\"9\"></rect>\n-<path d=\"M12 10v4M10 12h4\" stroke=\"#FF0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M12 10v4M10 12h4\" stroke=\"#FF0000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.2\"></path>\n </svg>\n </button>\n <!-- 通知铃铛 -->"
-  },
-  {
-    "file": "0048.html",
-    "caption": "Elements: 48/108",
-    "diff": "--- \n+++ \n@@ -104,7 +104,7 @@\n </svg>\n </button>\n <!-- 通知铃铛 -->\n-<button class=\"rounded-full p-2 hover:bg-gray-100\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n <path d=\"M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M12 22a2 2 0 002-2H10a2 2 0 002 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>"
-  },
-  {
-    "file": "0049.html",
-    "caption": "Elements: 49/108",
-    "diff": "--- \n+++ \n@@ -105,7 +105,7 @@\n </button>\n <!-- 通知铃铛 -->\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n-<svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" style=\"opacity:0;transition:opacity .35s ease-out;\" viewbox=\"0 0 24 24\">\n+<svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n <path d=\"M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n <path d=\"M12 22a2 2 0 002-2H10a2 2 0 002 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>"
-  },
-  {
-    "file": "0050.html",
-    "caption": "Elements: 50/108",
-    "diff": "--- \n+++ \n@@ -106,7 +106,7 @@\n <!-- 通知铃铛 -->\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n-<path d=\"M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5\"></path>\n <path d=\"M12 22a2 2 0 002-2H10a2 2 0 002 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n </svg>\n </button>"
-  },
-  {
-    "file": "0051.html",
-    "caption": "Elements: 51/108",
-    "diff": "--- \n+++ \n@@ -107,7 +107,7 @@\n <button class=\"rounded-full p-2 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewbox=\"0 0 24 24\">\n <path d=\"M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5\"></path>\n-<path d=\"M12 22a2 2 0 002-2H10a2 2 0 002 2z\" style=\"opacity:0;transition:opacity .35s ease-out;\"></path>\n+<path d=\"M12 22a2 2 0 002-2H10a2 2 0 002 2z\"></path>\n </svg>\n </button>\n <!-- 头像 -->"
-  },
-  {
-    "file": "0052.html",
-    "caption": "Elements: 52/108",
-    "diff": "--- \n+++ \n@@ -111,7 +111,7 @@\n </svg>\n </button>\n <!-- 头像 -->\n-<div class=\"bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center\" style=\"opacity:0;transition:opacity .35s ease-out;\">Y</div>\n+<div class=\"bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center\">Y</div>\n </div>\n </div>\n </div>"
-  },
-  {
-    "file": "0053.html",
-    "caption": "Elements: 53/108",
-    "diff": "--- \n+++ \n@@ -116,7 +116,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"3\" style=\"left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;\">\n-<div class=\"flex items-center space-x-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex items-center space-x-2\">\n <span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">全部</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">播客</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">游戏</span>"
-  },
-  {
-    "file": "0054.html",
-    "caption": "Elements: 54/108",
-    "diff": "--- \n+++ \n@@ -117,7 +117,7 @@\n </div>\n <div class=\"box\" id=\"3\" style=\"left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;\">\n <div class=\"flex items-center space-x-2\">\n-<span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">全部</span>\n+<span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\">全部</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">播客</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">游戏</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">直播</span>"
-  },
-  {
-    "file": "0055.html",
-    "caption": "Elements: 55/108",
-    "diff": "--- \n+++ \n@@ -118,7 +118,7 @@\n <div class=\"box\" id=\"3\" style=\"left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\">全部</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">播客</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">播客</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">游戏</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">直播</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">数学</span>"
-  },
-  {
-    "file": "0056.html",
-    "caption": "Elements: 56/108",
-    "diff": "--- \n+++ \n@@ -119,7 +119,7 @@\n <div class=\"flex items-center space-x-2\">\n <span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\">全部</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">播客</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">游戏</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">游戏</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">直播</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">数学</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">篮球</span>"
-  },
-  {
-    "file": "0057.html",
-    "caption": "Elements: 57/108",
-    "diff": "--- \n+++ \n@@ -120,7 +120,7 @@\n <span class=\"bg-black text-white rounded-md px-3 py-2 font-medium\">全部</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">播客</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">游戏</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">直播</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">直播</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">数学</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">篮球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">足球</span>"
-  },
-  {
-    "file": "0058.html",
-    "caption": "Elements: 58/108",
-    "diff": "--- \n+++ \n@@ -121,7 +121,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">播客</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">游戏</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">直播</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">数学</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">数学</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">篮球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">足球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">动画</span>"
-  },
-  {
-    "file": "0059.html",
-    "caption": "Elements: 59/108",
-    "diff": "--- \n+++ \n@@ -122,7 +122,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">游戏</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">直播</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">数学</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">篮球</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">篮球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">足球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">动画</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">最近上传</span>"
-  },
-  {
-    "file": "0060.html",
-    "caption": "Elements: 60/108",
-    "diff": "--- \n+++ \n@@ -123,7 +123,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">直播</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">数学</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">篮球</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">足球</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">足球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">动画</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">最近上传</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">发现新视频</span>"
-  },
-  {
-    "file": "0061.html",
-    "caption": "Elements: 61/108",
-    "diff": "--- \n+++ \n@@ -124,7 +124,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">数学</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">篮球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">足球</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">动画</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">动画</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">最近上传</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">发现新视频</span>\n </div>"
-  },
-  {
-    "file": "0062.html",
-    "caption": "Elements: 62/108",
-    "diff": "--- \n+++ \n@@ -125,7 +125,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">篮球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">足球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">动画</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">最近上传</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">最近上传</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">发现新视频</span>\n </div>\n </div>"
-  },
-  {
-    "file": "0063.html",
-    "caption": "Elements: 63/108",
-    "diff": "--- \n+++ \n@@ -126,7 +126,7 @@\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">足球</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">动画</span>\n <span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">最近上传</span>\n-<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">发现新视频</span>\n+<span class=\"bg-gray-100 text-black rounded-md px-3 py-2 font-medium\">发现新视频</span>\n </div>\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;\">"
-  },
-  {
-    "file": "0064.html",
-    "caption": "Elements: 64/108",
-    "diff": "--- \n+++ \n@@ -130,7 +130,7 @@\n </div>\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;\">\n-<div class=\"grid grid-cols-3 gap-4\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"grid grid-cols-3 gap-4\">\n <div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0065.html",
-    "caption": "Elements: 65/108",
-    "diff": "--- \n+++ \n@@ -131,7 +131,7 @@\n </div>\n <div class=\"box\" id=\"4\" style=\"left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;\">\n <div class=\"grid grid-cols-3 gap-4\">\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0066.html",
-    "caption": "Elements: 66/108",
-    "diff": "--- \n+++ \n@@ -132,7 +132,7 @@\n <div class=\"box\" id=\"4\" style=\"left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;\">\n <div class=\"grid grid-cols-3 gap-4\">\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0067.html",
-    "caption": "Elements: 67/108",
-    "diff": "--- \n+++ \n@@ -133,7 +133,7 @@\n <div class=\"grid grid-cols-3 gap-4\">\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0068.html",
-    "caption": "Elements: 68/108",
-    "diff": "--- \n+++ \n@@ -134,7 +134,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0069.html",
-    "caption": "Elements: 69/108",
-    "diff": "--- \n+++ \n@@ -136,7 +136,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          The Key Equation Behind Probability\n         </h3>"
-  },
-  {
-    "file": "0070.html",
-    "caption": "Elements: 70/108",
-    "diff": "--- \n+++ \n@@ -137,7 +137,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          The Key Equation Behind Probability\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0071.html",
-    "caption": "Elements: 71/108",
-    "diff": "--- \n+++ \n@@ -140,7 +140,7 @@\n <h3 class=\"text-sm font-medium\">\n          The Key Equation Behind Probability\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          Artem Kirsanov\n          <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           ✔"
-  },
-  {
-    "file": "0072.html",
-    "caption": "Elements: 72/108",
-    "diff": "--- \n+++ \n@@ -142,7 +142,7 @@\n         </h3>\n <p class=\"text-xs text-gray-500\">\n          Artem Kirsanov\n-         <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+         <span class=\"font-bold\">\n           ✔\n          </span>\n          • 27万次观看 • 10个月前"
-  },
-  {
-    "file": "0073.html",
-    "caption": "Elements: 73/108",
-    "diff": "--- \n+++ \n@@ -150,7 +150,7 @@\n </div>\n </div>\n </div>\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0074.html",
-    "caption": "Elements: 74/108",
-    "diff": "--- \n+++ \n@@ -151,7 +151,7 @@\n </div>\n </div>\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0075.html",
-    "caption": "Elements: 75/108",
-    "diff": "--- \n+++ \n@@ -152,7 +152,7 @@\n </div>\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0076.html",
-    "caption": "Elements: 76/108",
-    "diff": "--- \n+++ \n@@ -153,7 +153,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0077.html",
-    "caption": "Elements: 77/108",
-    "diff": "--- \n+++ \n@@ -155,7 +155,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          Statistical mechanics of extensive-width shallow neural networks near interpolation\n         </h3>"
-  },
-  {
-    "file": "0078.html",
-    "caption": "Elements: 78/108",
-    "diff": "--- \n+++ \n@@ -156,7 +156,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          Statistical mechanics of extensive-width shallow neural networks near interpolation\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0079.html",
-    "caption": "Elements: 79/108",
-    "diff": "--- \n+++ \n@@ -159,7 +159,7 @@\n <h3 class=\"text-sm font-medium\">\n          Statistical mechanics of extensive-width shallow neural networks near interpolation\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          ICTP Quantitative Life Sciences • 48次观看 • 22小时前\n         </p>\n </div>"
-  },
-  {
-    "file": "0080.html",
-    "caption": "Elements: 80/108",
-    "diff": "--- \n+++ \n@@ -165,7 +165,7 @@\n </div>\n </div>\n </div>\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0081.html",
-    "caption": "Elements: 81/108",
-    "diff": "--- \n+++ \n@@ -166,7 +166,7 @@\n </div>\n </div>\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0082.html",
-    "caption": "Elements: 82/108",
-    "diff": "--- \n+++ \n@@ -167,7 +167,7 @@\n </div>\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0083.html",
-    "caption": "Elements: 83/108",
-    "diff": "--- \n+++ \n@@ -168,7 +168,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0084.html",
-    "caption": "Elements: 84/108",
-    "diff": "--- \n+++ \n@@ -170,7 +170,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)\n         </h3>"
-  },
-  {
-    "file": "0085.html",
-    "caption": "Elements: 85/108",
-    "diff": "--- \n+++ \n@@ -171,7 +171,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0086.html",
-    "caption": "Elements: 86/108",
-    "diff": "--- \n+++ \n@@ -174,7 +174,7 @@\n <h3 class=\"text-sm font-medium\">\n          Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          Hsi-Wei • 9.3万次观看 • 1个月前\n         </p>\n </div>"
-  },
-  {
-    "file": "0087.html",
-    "caption": "Elements: 87/108",
-    "diff": "--- \n+++ \n@@ -180,7 +180,7 @@\n </div>\n </div>\n </div>\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0088.html",
-    "caption": "Elements: 88/108",
-    "diff": "--- \n+++ \n@@ -181,7 +181,7 @@\n </div>\n </div>\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0089.html",
-    "caption": "Elements: 89/108",
-    "diff": "--- \n+++ \n@@ -182,7 +182,7 @@\n </div>\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0090.html",
-    "caption": "Elements: 90/108",
-    "diff": "--- \n+++ \n@@ -183,7 +183,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0091.html",
-    "caption": "Elements: 91/108",
-    "diff": "--- \n+++ \n@@ -185,7 +185,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          EVE Online: 加入我们，开启宇宙之旅\n         </h3>"
-  },
-  {
-    "file": "0092.html",
-    "caption": "Elements: 92/108",
-    "diff": "--- \n+++ \n@@ -186,7 +186,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          EVE Online: 加入我们，开启宇宙之旅\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0093.html",
-    "caption": "Elements: 93/108",
-    "diff": "--- \n+++ \n@@ -189,7 +189,7 @@\n <h3 class=\"text-sm font-medium\">\n          EVE Online: 加入我们，开启宇宙之旅\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          赞助厂商广告 · EVE Online\n         </p>\n </div>"
-  },
-  {
-    "file": "0094.html",
-    "caption": "Elements: 94/108",
-    "diff": "--- \n+++ \n@@ -195,7 +195,7 @@\n </div>\n </div>\n </div>\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0095.html",
-    "caption": "Elements: 95/108",
-    "diff": "--- \n+++ \n@@ -196,7 +196,7 @@\n </div>\n </div>\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0096.html",
-    "caption": "Elements: 96/108",
-    "diff": "--- \n+++ \n@@ -197,7 +197,7 @@\n </div>\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0097.html",
-    "caption": "Elements: 97/108",
-    "diff": "--- \n+++ \n@@ -198,7 +198,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0098.html",
-    "caption": "Elements: 98/108",
-    "diff": "--- \n+++ \n@@ -200,7 +200,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          \"Dopamine Loading\" is the EASIEST way to get ADDICTED to studying\n         </h3>"
-  },
-  {
-    "file": "0099.html",
-    "caption": "Elements: 99/108",
-    "diff": "--- \n+++ \n@@ -201,7 +201,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          \"Dopamine Loading\" is the EASIEST way to get ADDICTED to studying\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0100.html",
-    "caption": "Elements: 100/108",
-    "diff": "--- \n+++ \n@@ -204,7 +204,7 @@\n <h3 class=\"text-sm font-medium\">\n          \"Dopamine Loading\" is the EASIEST way to get ADDICTED to studying\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          Matthew Smith\n         </p>\n </div>"
-  },
-  {
-    "file": "0101.html",
-    "caption": "Elements: 101/108",
-    "diff": "--- \n+++ \n@@ -210,7 +210,7 @@\n </div>\n </div>\n </div>\n-<div class=\"relative bg-white rounded shadow\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0102.html",
-    "caption": "Elements: 102/108",
-    "diff": "--- \n+++ \n@@ -211,7 +211,7 @@\n </div>\n </div>\n <div class=\"relative bg-white rounded shadow\">\n-<div class=\"w-full h-48 bg-gray-400 rounded-t\" style=\"opacity:0;transition:opacity .35s ease-out;\"></div>\n+<div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>"
-  },
-  {
-    "file": "0103.html",
-    "caption": "Elements: 103/108",
-    "diff": "--- \n+++ \n@@ -212,7 +212,7 @@\n </div>\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n-<div class=\"p-2 flex\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0104.html",
-    "caption": "Elements: 104/108",
-    "diff": "--- \n+++ \n@@ -213,7 +213,7 @@\n <div class=\"relative bg-white rounded shadow\">\n <div class=\"w-full h-48 bg-gray-400 rounded-t\"></div>\n <div class=\"p-2 flex\">\n-<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0105.html",
-    "caption": "Elements: 105/108",
-    "diff": "--- \n+++ \n@@ -215,7 +215,7 @@\n <div class=\"p-2 flex\">\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n-<div class=\"flex-1\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<div class=\"flex-1\">\n <h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n          But what is quantum computing? (Grover's Algorithm)\n         </h3>"
-  },
-  {
-    "file": "0106.html",
-    "caption": "Elements: 106/108",
-    "diff": "--- \n+++ \n@@ -216,7 +216,7 @@\n <div class=\"w-6 h-6 bg-gray-400 rounded-full mr-2\">\n </div>\n <div class=\"flex-1\">\n-<h3 class=\"text-sm font-medium\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<h3 class=\"text-sm font-medium\">\n          But what is quantum computing? (Grover's Algorithm)\n         </h3>\n <p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">"
-  },
-  {
-    "file": "0107.html",
-    "caption": "Elements: 107/108",
-    "diff": "--- \n+++ \n@@ -219,7 +219,7 @@\n <h3 class=\"text-sm font-medium\">\n          But what is quantum computing? (Grover's Algorithm)\n         </h3>\n-<p class=\"text-xs text-gray-500\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+<p class=\"text-xs text-gray-500\">\n          3Blue1Brown\n          <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n           ✔"
-  },
-  {
-    "file": "0108.html",
-    "caption": "Elements: 108/108",
-    "diff": "--- \n+++ \n@@ -221,7 +221,7 @@\n         </h3>\n <p class=\"text-xs text-gray-500\">\n          3Blue1Brown\n-         <span class=\"font-bold\" style=\"opacity:0;transition:opacity .35s ease-out;\">\n+         <span class=\"font-bold\">\n           ✔\n          </span>\n </p>"
-  }
-]
\ No newline at end of file
diff --git a/screencoder/demo/public/demos/youtube-interface/original_youtube.html b/screencoder/demo/public/demos/youtube-interface/original_youtube.html
deleted file mode 100644
index 4d77d745028d40fdc98bf09f6f5cef48cfe24ad2..0000000000000000000000000000000000000000
--- a/screencoder/demo/public/demos/youtube-interface/original_youtube.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Bounding Boxes Layout</title>
-  <style>
-    body,html{margin:0;padding:0;width:100%;height:100%}
-    .container{position:relative;width:100%;height:100%;box-sizing:border-box}
-    .box{position:absolute;box-sizing:border-box;overflow:hidden}
-    .box>.container{display:grid;width:100%;height:100%}
-    .text-xxs{font-size:10px;line-height:1.2}
-    .text-xxxs{font-size:8px;line-height:1.1}
-    .sidebar-container{padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow:hidden}
-    .sidebar-item{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;width:100%}
-    .sidebar-icon{width:16px;height:16px;flex-shrink:0}
-    .sidebar-text{font-size:6px;margin-top:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.0}
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div class="container">
-
-  <!-- ───────────── 左侧竖栏 ───────────── -->
-  <div class="box" id="1" style="left:0.5%;top:0%;width:2.6722%;height:99.7661%;">
-    <div class="sidebar-container">
-
-      <!-- 汉堡菜单 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-          <path d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </div>
-
-      <!-- 首页 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M3 10.25L12 3l9 7.25V20a1 1 0 01-1 1h-5a1 1 0 01-1-1v-5H9v5a1 1 0 01-1 1H4a1 1 0 01-1-1V10.25z"/>
-        </svg>
-        <span class="sidebar-text">首页</span>
-      </div>
-
-      <!-- Shorts -->
-      <div class="sidebar-item">
-        <!-- 官方 Shorts 轮廓（红色 S 形 + 播放三角） -->
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M10.11 2.18a1.42 1.42 0 012.02-.54l5.6 3.3a1.42 1.42 0 010 2.45l-1.92 1.14 1.92 1.14a1.42 1.42 0 010 2.45l-5.6 3.3a1.42 1.42 0 01-2.02-.54L8 12l2.11-9.82z"/>
-          <polygon fill="#fff" points="9 8 9 16 15 12"/>
-        </svg>
-        <span class="sidebar-text">Shorts</span>
-      </div>
-
-      <!-- 订阅 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <rect x="2" y="6" width="20" height="12" rx="2"></rect>
-          <polygon fill="#fff" points="10 9 16 12 10 15"/>
-        </svg>
-        <span class="sidebar-text">订阅</span>
-      </div>
-
-      <!-- 我 -->
-      <div class="sidebar-item">
-        <svg class="sidebar-icon" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="12" cy="8" r="4"></circle>
-          <path d="M4 20a8 8 0 0116 0H4z"></path>
-        </svg>
-        <span class="sidebar-text">我</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- ───────────── 顶部导航 ───────────── -->
-  <div class="box" id="2" style="left:2.7909738717%;top:0%;width:97.0902612827%;height:6.1403508772%;">
-    <div class="flex items-center">
-
-      <!-- Logo -->
-      <div class="flex items-center ml-4 space-x-1">
-        <svg class="w-8 h-6" viewBox="0 0 90 60">
-          <rect width="90" height="60" rx="12" fill="#FF0000"></rect>
-          <polygon points="36,18 60,30 36,42" fill="#fff"></polygon>
-        </svg>
-        <span class="text-xl font-bold">YouTube</span>
-        <span class="text-sm font-medium">HK</span>
-      </div>
-
-      <!-- 搜索 -->
-      <div class="flex items-center mx-10 flex-grow">
-        <input class="border border-gray-300 rounded-l-md px-3 py-1 focus:outline-none w-full" placeholder="搜索" type="text"/>
-        <button class="border border-gray-300 border-l-0 rounded-r-md px-4 py-1 bg-gray-50 hover:bg-gray-100">
-          <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M21 21l-5.2-5.2M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"/>
-          </svg>
-        </button>
-        <!-- 语音搜索 -->
-        <button class="ml-3 rounded-full bg-gray-50 hover:bg-gray-100 px-2 py-1">
-          <svg class="w-5 h-5 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3z"/>
-            <path d="M5 10a7 7 0 0014 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12 17v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M8 21h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- 创建 / 通知 / 头像 -->
-      <div class="flex items-center mr-4 space-x-4">
-
-        <!-- 创建(摄像机 +) -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M15 10.5l4-2.5v8l-4-2.5V17a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h10a1 1 0 011 1v3.5z"/>
-            <rect x="9" y="9" width="6" height="6" rx="1" fill="#fff"/>
-            <path d="M12 10v4M10 12h4" stroke="#FF0000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </button>
-
-        <!-- 通知铃铛 -->
-        <button class="rounded-full p-2 hover:bg-gray-100">
-          <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-            <path d="M15 17h5l-1.403-1.403A2.032 2.032 0 0118 14.159V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.597 1.438L4 17h5"/>
-            <path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"/>
-          </svg>
-        </button>
-
-        <!-- 头像 -->
-        <div class="bg-green-700 text-white rounded-full w-6 h-6 flex items-center justify-center">Y</div>
-      </div>
-    </div>
-  </div>
-  <div class="box" id="3" style="left:3.7909738717%;top:5.3742690058%;width:97.0902612827%;height:5.1520467836%;">
-    <div class="flex items-center space-x-2">
-      <span class="bg-black text-white rounded-md px-3 py-2 font-medium">全部</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">播客</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">游戏</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">直播</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">数学</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">篮球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">足球</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">动画</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">最近上传</span>
-      <span class="bg-gray-100 text-black rounded-md px-3 py-2 font-medium">发现新视频</span>
-    </div>
-  </div>
-   <div class="box" id="4" style="left: 3.7909738717339665%; top: 10.584795321637428%; width: 97.09026128266032%; height: 89.18128654970761%;">
-    <div class="grid grid-cols-3 gap-4">
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         The Key Equation Behind Probability
-        </h3>
-        <p class="text-xs text-gray-500">
-         Artem Kirsanov
-         <span class="font-bold">
-          ✔
-         </span>
-         • 27万次观看 • 10个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Statistical mechanics of extensive-width shallow neural networks near interpolation
-        </h3>
-        <p class="text-xs text-gray-500">
-         ICTP Quantitative Life Sciences • 48次观看 • 22小时前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         Wall Street Quant interview be likes | 華爾街量化交易面試 (中英文字幕)
-        </h3>
-        <p class="text-xs text-gray-500">
-         Hsi-Wei • 9.3万次观看 • 1个月前
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         EVE Online: 加入我们，开启宇宙之旅
-        </h3>
-        <p class="text-xs text-gray-500">
-         赞助厂商广告 · EVE Online
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         "Dopamine Loading" is the EASIEST way to get ADDICTED to studying
-        </h3>
-        <p class="text-xs text-gray-500">
-         Matthew Smith
-        </p>
-       </div>
-      </div>
-     </div>
-     <div class="relative bg-white rounded shadow">
-      <div class="w-full h-48 bg-gray-400 rounded-t"></div>
-      <div class="p-2 flex">
-       <div class="w-6 h-6 bg-gray-400 rounded-full mr-2">
-       </div>
-       <div class="flex-1">
-        <h3 class="text-sm font-medium">
-         But what is quantum computing? (Grover's Algorithm)
-        </h3>
-        <p class="text-xs text-gray-500">
-         3Blue1Brown
-         <span class="font-bold">
-          ✔
-         </span>
-        </p>
-       </div>
-      </div>
-     </div>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
diff --git a/screencoder/demo/script/prepare_steps.py b/screencoder/demo/script/prepare_steps.py
deleted file mode 100644
index 4c2fb388760d7633bbf22cc0e2b102f115a48055..0000000000000000000000000000000000000000
--- a/screencoder/demo/script/prepare_steps.py
+++ /dev/null
@@ -1,62 +0,0 @@
-import sys, pathlib, difflib, json, bs4
-
-src_html = pathlib.Path(sys.argv[1]).read_text(encoding="utf-8")
-out_dir  = pathlib.Path(sys.argv[2])
-out_dir.mkdir(parents=True, exist_ok=True)
-
-soup = bs4.BeautifulSoup(src_html, "html.parser")
-
-# 1) select elements to be revealed frame by frame
-#    here we use all tags inside .box as an example, you can filter by yourself:
-targets = []
-for box in soup.select("div.box"):
-    for node in box.descendants:
-        if isinstance(node, bs4.Tag):
-            # you can filter out wrapper / script / style etc. as needed
-            if node.name in {"script", "style"}:
-                continue
-            targets.append(node)
-
-total = len(targets)
-print(f"Total nodes to be revealed: {total}")
-
-manifest, prev_lines = [], []
-
-for idx, node in enumerate(targets, 1):
-    step_soup = bs4.BeautifulSoup(src_html, "html.parser")
-
-    # second pass: hide elements that are not yet shown
-    shown_ids = set()        # use id() to identify same node
-    for j, n in enumerate(
-        step_soup.select("div.box *")    # * = all descendants
-    ):
-        if isinstance(n, bs4.Tag) and id(n) in shown_ids:
-            # already processed (prevent duplicate)
-            continue
-        if j + 1 > idx:                   # not yet shown elements
-            style = n.get("style", "")
-            # ensure no duplicate style
-            if "opacity" not in style:
-                style = (
-                    "opacity:0;transition:opacity .35s ease-out;" + style
-                )
-            n["style"] = style
-        shown_ids.add(id(n))
-
-    # 3) write file
-    fname = f"{idx:04d}.html"
-    (out_dir / fname).write_text(str(step_soup), encoding="utf-8")
-
-    diff = "" if not prev_lines else "\n".join(
-        difflib.unified_diff(prev_lines, str(step_soup).splitlines(), lineterm="")
-    )
-    manifest.append(
-        {"file": fname, "caption": f"Elements: {idx}/{total}", "diff": diff}
-    )
-    prev_lines = str(step_soup).splitlines()
-
-# 4) write manifest
-(out_dir / "manifest.json").write_text(
-    json.dumps(manifest, ensure_ascii=False, indent=2)
-)
-print("Finished", out_dir.resolve())
diff --git a/screencoder/demo/src/App.jsx b/screencoder/demo/src/App.jsx
deleted file mode 100644
index 6622b0092aea5bcfce533b3425eb67bce3853269..0000000000000000000000000000000000000000
--- a/screencoder/demo/src/App.jsx
+++ /dev/null
@@ -1,979 +0,0 @@
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import Editor from '@monaco-editor/react';
-import DemoSelector from './DemoSelector';
-
-// Auto-scale Hook - simplified back to its original purpose
-function useAutoScale(iframeRef, wrapRef) {
-  useLayoutEffect(() => {
-    if (!iframeRef.current || !wrapRef.current) return;
-
-    const calc = () => {
-      const doc = iframeRef.current.contentDocument;
-      if (!doc || !doc.body) return;
-
-      // Inject base styles for responsive scaling, if not present
-      if (!doc.querySelector('style[data-responsive-scale]')) {
-        const style = doc.createElement('style');
-        style.setAttribute('data-responsive-scale', '');
-        style.innerHTML = `
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-          .container {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            box-sizing: border-box;
-          }
-          .box {
-            position: absolute;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          .box img { max-width: 100%; height: auto; }
-          .box p, .box span:not(.sidebar-text) { font-size: max(16px, 1.2vw); line-height: 1.4; }
-          .box button { font-size: max(14px, 1.0vw); padding: max(6px, 0.4vw) max(12px, 0.8vw); }
-          .box input { font-size: max(16px, 1.2vw); padding: max(6px, 0.4vw) max(12px, 0.8vw); }
-          .box svg { width: max(20px, 1.5vw); height: max(20px, 1.5vw); }
-        `;
-        doc.head.appendChild(style);
-      }
-    };
-
-    const iframe = iframeRef.current;
-    iframe.addEventListener('load', calc);
-    calc();
-
-    window.addEventListener('resize', calc);
-    return () => {
-      iframe.removeEventListener('load', calc);
-      window.removeEventListener('resize', calc);
-    };
-  }, [iframeRef, wrapRef]);
-}
-
-// Instagram-specific preview component
-function InstagramPreview({ code }) {
-  const iframeRef = useRef(null);
-  const wrapRef = useRef(null);
-  
-  useLayoutEffect(() => {
-    if (!iframeRef.current || !wrapRef.current) return;
-
-    const calc = () => {
-      const doc = iframeRef.current.contentDocument;
-      if (!doc || !doc.body) return;
-
-      // Inject Instagram-specific responsive styles
-      if (!doc.querySelector('style[data-instagram-responsive]')) {
-        const style = doc.createElement('style');
-        style.setAttribute('data-instagram-responsive', '');
-        style.innerHTML = `
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-          .container {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          .box {
-            position: absolute;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          // .box img { max-width: 100%; height: auto; }
-          // .box p, .box span { font-size: max(14px, 1.0vw); line-height: 1.4; }
-          // .box button { font-size: max(12px, 0.9vw); padding: max(4px, 0.3vw) max(8px, 0.6vw); }
-          // .box input { font-size: max(14px, 1.0vw); padding: max(4px, 0.3vw) max(8px, 0.6vw); }
-          // .box svg { width: max(16px, 1.2vw); height: max(16px, 1.2vw); }
-        `;
-        doc.head.appendChild(style);
-      }
-    };
-
-    const iframe = iframeRef.current;
-    iframe.addEventListener('load', calc);
-    calc();
-
-    window.addEventListener('resize', calc);
-    return () => {
-      iframe.removeEventListener('load', calc);
-      window.removeEventListener('resize', calc);
-    };
-  }, [iframeRef, wrapRef]);
-
-  return (
-    <div className="w-full h-full bg-gray-100 flex items-center justify-center p-2">
-      <div ref={wrapRef} className="w-full h-full bg-white shadow-xl rounded-lg overflow-hidden">
-        <iframe 
-          ref={iframeRef} 
-          srcDoc={code} 
-          className="w-full h-full border-0"
-          style={{ 
-            transform: 'scale(1.0)',
-            transformOrigin: 'center',
-            imageRendering: '-webkit-optimize-contrast'
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// Design-specific preview component
-function DesignPreview({ code }) {
-  const iframeRef = useRef(null);
-  const wrapRef = useRef(null);
-
-  useLayoutEffect(() => {
-    if (!iframeRef.current || !wrapRef.current) return;
-    const calc = () => {
-      const doc = iframeRef.current.contentDocument;
-      if (!doc || !doc.body) return;
-      if (!doc.querySelector('style[data-design-responsive]')) {
-        const style = doc.createElement('style');
-        style.setAttribute('data-design-responsive', '');
-        style.innerHTML = `
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-          .container {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          .box {
-            position: absolute;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-        `;
-        doc.head.appendChild(style);
-      }
-    };
-    const iframe = iframeRef.current;
-    iframe.addEventListener('load', calc);
-    calc();
-    window.addEventListener('resize', calc);
-    return () => {
-      iframe.removeEventListener('load', calc);
-      window.removeEventListener('resize', calc);
-    };
-  }, [iframeRef, wrapRef]);
-
-  return (
-    <div className="w-full h-full bg-gray-100 flex items-center justify-center p-2">
-      <div ref={wrapRef} className="w-full h-full bg-white shadow-xl rounded-lg overflow-hidden">
-        <iframe
-          ref={iframeRef}
-          srcDoc={code}
-          className="w-full h-full border-0"
-          style={{
-            transform: 'scale(1.0)',
-            transformOrigin: 'top left',
-            imageRendering: '-webkit-optimize-contrast'
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// LinkedIn-specific preview component
-function LinkedInPreview({ code }) {
-  const iframeRef = useRef(null);
-  const wrapRef = useRef(null);
-
-  useLayoutEffect(() => {
-    if (!iframeRef.current || !wrapRef.current) return;
-    const calc = () => {
-      const doc = iframeRef.current.contentDocument;
-      if (!doc || !doc.body) return;
-      if (!doc.querySelector('style[data-linkedin-responsive]')) {
-        const style = doc.createElement('style');
-        style.setAttribute('data-linkedin-responsive', '');
-        style.innerHTML = `
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-          .container {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-          .box {
-            position: absolute;
-            box-sizing: border-box;
-            overflow: hidden;
-          }
-        `;
-        doc.head.appendChild(style);
-      }
-    };
-    const iframe = iframeRef.current;
-    iframe.addEventListener('load', calc);
-    calc();
-    window.addEventListener('resize', calc);
-    return () => {
-      iframe.removeEventListener('load', calc);
-      window.removeEventListener('resize', calc);
-    };
-  }, [iframeRef, wrapRef]);
-
-  return (
-    <div className="w-full h-full bg-gray-100 flex items-center justify-center p-2">
-      <div ref={wrapRef} className="w-full h-full bg-white shadow-xl rounded-lg overflow-hidden">
-        <iframe
-          ref={iframeRef}
-          srcDoc={code}
-          className="w-full h-full border-0"
-          style={{
-            transform: 'scale(1.01)',
-            transformOrigin: 'center',
-            // imageRendering: '-webkit-optimize-contrast'
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// Scaled preview component
-function ScaledPreview({ code, demoId }) {
-  const iframeRef = useRef(null);
-  const wrapRef = useRef(null);
-  
-  useAutoScale(iframeRef, wrapRef);
-  
-  if (demoId === 'instagram') {
-    return <InstagramPreview code={code} />;
-  }
-  if (demoId === 'design') {
-    return <DesignPreview code={code} />;
-  }
-  if (demoId === 'linkedin') {
-    return <LinkedInPreview code={code} />;
-  }
-
-  // Default preview for all other demos
-  return (
-    <div ref={wrapRef} className="w-full h-full overflow-hidden bg-gray-50">
-      <iframe 
-        ref={iframeRef} 
-        srcDoc={code} 
-        className="w-full h-full border-0 bg-white"
-        style={{ 
-          imageRendering: '-webkit-optimize-contrast',
-          minHeight: '800px',
-          transform: 'scale(1.1)',
-          transformOrigin: 'top left'
-        }}
-      />
-    </div>
-  );
-}
-
-export default function App() {
-  const [currentDemo, setCurrentDemo] = useState(null);
-  const [showDemoSelector, setShowDemoSelector] = useState(true);
-  const [steps, setSteps] = useState([]);
-  const [idx, setIdx] = useState(0);
-  const [progress, setProgress] = useState(0); // Continuous progress percentage
-  const [code, setCode] = useState(`
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Screenshot to Code</title>
-      <script src="https://cdn.tailwindcss.com"></script>
-    </head>
-    <body class="bg-gray-50 flex items-center justify-center min-h-screen">
-      <div class="text-center">
-        <div class="text-6xl mb-4">🎨</div>
-        <h1 class="text-2xl font-bold text-gray-800 mb-2">UI2Code Demo</h1>
-        <p class="text-gray-600 mb-4">Choose a demo to see how code generation works</p>
-        <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-          <p class="text-sm text-gray-500">
-            Select a demo from the list to start the interactive code generation experience.
-          </p>
-        </div>
-      </div>
-    </body>
-    </html>
-  `);
-  const [playing, setPlaying] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [dragOver, setDragOver] = useState(false);
-  const [loadingError, setLoadingError] = useState(null);
-  const [uploadedImage, setUploadedImage] = useState(null);
-  const [imageReady, setImageReady] = useState(false);
-  const intervalRef = useRef(null);
-  const progressIntervalRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const [designPrompt, setDesignPrompt] = useState('');
-
-  // load manifest when demo is selected
-  useEffect(() => {
-    if (!currentDemo) return;
-    
-    fetch(currentDemo.manifest)
-      .then(res => {
-        if (!res.ok) {
-          throw new Error(`HTTP error! status: ${res.status}`);
-        }
-        return res.json();
-      })
-      .then(data => {
-        setSteps(data);
-        setLoadingError(null);
-      })
-      .catch(err => {
-        console.error('Failed to load manifest:', err);
-        setLoadingError('Failed to load build steps manifest');
-        // Create a simple default step
-        setSteps([
-          { file: 'demo.html', caption: 'Demo Interface', description: 'Demo Interface' }
-        ]);
-      });
-  }, [currentDemo]);
-
-  // load code whenever idx changes - but only if image is ready AND playing
-  useEffect(() => {
-    if (!steps.length || !imageReady || !playing || !currentDemo) return;
-
-    // if finalHtml is available, show finalHtml when idx equals steps.length
-    if (
-      currentDemo.finalHtml &&
-      idx === steps.length
-    ) {
-      // load finalHtml
-      fetch(currentDemo.finalHtml)
-        .then(res => {
-          if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-          }
-          return res.text();
-        })
-        .then(html => {
-          setCode(html);
-          setLoadingError(null);
-        })
-        .catch(err => {
-          console.error('Failed to load final HTML:', err);
-          setLoadingError('Failed to load final HTML');
-          setCode(`
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-              <meta charset="UTF-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <title>Error</title>
-              <script src="https://cdn.tailwindcss.com"></script>
-            </head>
-            <body class="bg-gray-100 flex items-center justify-center min-h-screen">
-              <div class="text-center">
-                <div class="text-6xl mb-4">⚠️</div>
-                <h1 class="text-2xl font-bold text-gray-800 mb-2">Final HTML Not Found</h1>
-                <p class="text-gray-600 mb-4">Could not load final HTML</p>
-                <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-                  <p class="text-sm text-gray-500">
-                    The final HTML file might be missing or the path is incorrect.
-                  </p>
-                </div>
-              </div>
-            </body>
-            </html>
-          `);
-        });
-    } else {
-        // normal steps
-      const step = steps[idx];
-      if (!step) return;
-      const demoBasePath = currentDemo.manifest.replace('/manifest.json', '');
-      fetch(demoBasePath + '/' + step.file)
-        .then(res => {
-          if (!res.ok) {
-            throw new Error(`HTTP error! status: ${res.status}`);
-          }
-          return res.text();
-        })
-        .then(html => {
-          setCode(html);
-          setLoadingError(null);
-        })
-        .catch(err => {
-          console.error('Failed to load step file:', err);
-          setLoadingError(`Failed to load step: ${step.file}`);
-          // Create a simple error page
-          setCode(`
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-              <meta charset="UTF-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <title>Error</title>
-              <script src="https://cdn.tailwindcss.com"></script>
-            </head>
-            <body class="bg-gray-100 flex items-center justify-center min-h-screen">
-              <div class="text-center">
-                <div class="text-6xl mb-4">⚠️</div>
-                <h1 class="text-2xl font-bold text-gray-800 mb-2">File Not Found</h1>
-                <p class="text-gray-600 mb-4">Could not load: ${step.file}</p>
-                <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-                  <p class="text-sm text-gray-500">
-                    This might be because the build steps haven't been generated yet, 
-                    or the file path is incorrect.
-                  </p>
-                </div>
-              </div>
-            </body>
-            </html>
-          `);
-        });
-    }
-  }, [idx, steps, imageReady, playing, currentDemo]);
-
-  // autoplay with smooth progress and auto-stop at the end
-  useEffect(() => {
-    if (!playing) {
-      clearInterval(progressIntervalRef.current);
-      return;
-    }
-    
-    // Check if the current demo has a specific interval time
-    const customIntervalTime = currentDemo?.intervalTime;
-    
-    // Define total duration based on whether a custom interval is set
-    const totalDuration = customIntervalTime 
-      ? customIntervalTime * (steps.length || 1) // Use custom time if available
-      : (steps.length > 100 ? 100 : 200) * (steps.length || 1); // Default dynamic duration
-      
-    const updateInterval = 50; // Update UI every 50ms
-    const progressStep = 100 / (totalDuration / updateInterval);
-    
-    progressIntervalRef.current = setInterval(() => {
-      setProgress(currentProgress => {
-        const newProgress = currentProgress + progressStep;
-        
-        // Calculate which step we should be at
-        // if finalHtml is available, total steps include finalHtml
-        const totalSteps = currentDemo?.finalHtml ? steps.length + 1 : steps.length;
-        const targetStepIndex = Math.min(totalSteps, Math.floor((newProgress / 100) * totalSteps));
-        
-        // Directly set the index without causing re-trigger of this effect
-        setIdx(targetStepIndex);
-        
-        // If reaching 100%, stop playing
-        if (newProgress >= 100) {
-          setPlaying(false);
-          // Ensure we are at the very end (finalHtml if available, otherwise last step)
-          setIdx(totalSteps - 1);
-          return 100;
-        }
-        
-        return newProgress;
-      });
-    }, updateInterval);
-    
-    return () => {
-      clearInterval(progressIntervalRef.current);
-    };
-  }, [playing, steps.length, currentDemo]);
-
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    setDragOver(true);
-  };
-
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    setDragOver(false);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setDragOver(false);
-    const files = Array.from(e.dataTransfer.files);
-    handleFiles(files);
-  };
-
-  const handleFileSelect = (e) => {
-    const files = Array.from(e.target.files);
-    handleFiles(files);
-  };
-
-  const handleDemoSelect = (demo) => {
-    setCurrentDemo(demo);
-    setShowDemoSelector(false);
-    setUploadedImage(demo.thumbnail);
-    setImageReady(true);
-    setIdx(0);
-    setProgress(0); // Reset progress
-    setPlaying(false);
-    // Set ready page
-    setCode(`
-      <!DOCTYPE html>
-      <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Ready to Generate</title>
-        <script src="https://cdn.tailwindcss.com"></script>
-      </head>
-      <body class="bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center min-h-screen">
-        <div class="text-center">
-          <div class="text-6xl mb-4">🚀</div>
-          <h1 class="text-3xl font-bold text-gray-800 mb-2">Ready to Generate!</h1>
-          <p class="text-gray-600 mb-4">Demo "${demo.name}" is loaded and ready</p>
-          <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-            <p class="text-sm text-gray-500 mb-4">
-              Click the "▶️ Play" button to start the step-by-step code generation.
-            </p>
-            <div class="flex items-center justify-center space-x-2">
-              <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
-              <span class="text-sm font-medium text-green-600">Ready to start</span>
-            </div>
-          </div>
-        </div>
-      </body>
-      </html>
-    `);
-  };
-
-  const handleFiles = (files) => {
-    const imageFiles = files.filter(file => file.type.startsWith('image/'));
-    if (imageFiles.length > 0) {
-      const file = imageFiles[0];
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        console.log('Image loaded:', e.target.result ? 'Success' : 'Failed');
-        setUploadedImage(e.target.result);
-        setImageReady(true);
-        setIdx(0); // Reset to first step
-        setProgress(0); // Reset progress
-        setPlaying(false); // Don't auto-play, wait for user to click play
-        // Set ready page
-        setCode(`
-          <!DOCTYPE html>
-          <html lang="en">
-          <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Ready to Generate</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-          </head>
-          <body class="bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center min-h-screen">
-            <div class="text-center">
-              <div class="text-6xl mb-4">🚀</div>
-              <h1 class="text-3xl font-bold text-gray-800 mb-2">Ready to Generate!</h1>
-              <p class="text-gray-600 mb-4">Your screenshot has been uploaded successfully</p>
-              <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-                <p class="text-sm text-gray-500 mb-4">
-                  Click the "▶️ Play" button to start generating code from your design.
-                </p>
-                <div class="flex items-center justify-center space-x-2">
-                  <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
-                  <span class="text-sm font-medium text-green-600">Ready to start</span>
-                </div>
-              </div>
-            </div>
-          </body>
-          </html>
-        `);
-      };
-      reader.onerror = (e) => {
-        console.error('Error reading file:', e);
-        setLoadingError('Failed to read image file');
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handlePlayToggle = () => {
-    if (!imageReady && !playing) {
-      // If no image uploaded, prompt user
-      return;
-    }
-    setPlaying(p => {
-      const newPlaying = !p;
-      // If starting to play, reset progress
-      if (newPlaying) {
-        setProgress(0);
-        setIdx(0);
-      }
-      // If starting to play, immediately load first step code
-      if (newPlaying && steps.length > 0 && currentDemo) {
-        const step = steps[0];
-        if (step) {
-          const demoBasePath = currentDemo.manifest.replace('/manifest.json', '');
-          fetch(demoBasePath + '/' + step.file)
-            .then(res => {
-              if (!res.ok) {
-                throw new Error(`HTTP error! status: ${res.status}`);
-              }
-              return res.text();
-            })
-            .then(html => {
-              setCode(html);
-              setLoadingError(null);
-            })
-            .catch(err => {
-              console.error('Failed to load step file:', err);
-              setLoadingError(`Failed to load step: ${step.file}`);
-            });
-        }
-      }
-      return newPlaying;
-    });
-  };
-
-  const handleReset = () => {
-    setIdx(0);
-    setProgress(0); // Reset progress
-    setPlaying(false);
-    // If image uploaded, return to Ready state, otherwise return to initial state
-    if (imageReady) {
-      setCode(`
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Ready to Generate</title>
-          <script src="https://cdn.tailwindcss.com"></script>
-        </head>
-        <body class="bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center min-h-screen">
-          <div class="text-center">
-            <div class="text-6xl mb-4">🚀</div>
-            <h1 class="text-3xl font-bold text-gray-800 mb-2">Ready to Generate!</h1>
-            <p class="text-gray-600 mb-4">Your screenshot has been uploaded successfully</p>
-            <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-              <p class="text-sm text-gray-500 mb-4">
-                Click the "▶️ Play" button to start generating code from your design.
-              </p>
-              <div class="flex items-center justify-center space-x-2">
-                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
-                <span class="text-sm font-medium text-green-600">Ready to start</span>
-              </div>
-            </div>
-          </div>
-        </body>
-        </html>
-      `);
-    }
-  };
-
-  const step = steps[idx] || {};
-  const isDesignDemo = currentDemo?.id === 'design';
-
-  // If showing demo selector
-  if (showDemoSelector) {
-    return (
-      <div className="min-h-screen bg-gray-50">
-        <DemoSelector onDemoSelect={handleDemoSelect} currentDemo={currentDemo} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-screen bg-gray-50">
-      {/* Left side - Screenshot to Code area */}
-      <div className="w-2/5 bg-white border-r border-gray-200 flex flex-col">
-        {/* Title area */}
-        <div className="p-4 border-b border-gray-200">
-          <div className="flex items-center justify-between mb-1">
-            <h1 className="text-xl font-bold text-gray-900">Screenshot to Code</h1>
-            <button
-              onClick={() => setShowDemoSelector(true)}
-              className="text-xs text-blue-600 hover:text-blue-800 underline"
-            >
-              ← Back to Demos
-            </button>
-          </div>
-          <p className="text-sm text-gray-600">
-            {currentDemo ? `Demo: ${currentDemo.name}` : 'Drag & drop a screenshot to get started.'}
-          </p>
-        </div>
-
-        {/* Upload area */}
-        <div className="p-4 border-b border-gray-100">
-          {!uploadedImage ? (
-            <div
-              className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
-                dragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
-              }`}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              onClick={() => fileInputRef.current?.click()}
-            >
-              <div className="text-2xl mb-2">📸</div>
-              <p className="text-sm text-gray-600 mb-1">Drop an image here</p>
-              <p className="text-xs text-gray-500">or click to browse</p>
-            </div>
-          ) : (
-            <div className="text-center">
-              <div className="text-sm text-green-700 font-medium mb-2">✅ Image uploaded successfully!</div>
-              <button 
-                className="text-xs text-blue-600 hover:text-blue-800 underline"
-                onClick={() => {
-                  setUploadedImage(null);
-                  setImageReady(false);
-                  setPlaying(false);
-                  setIdx(0);
-                  setProgress(0); // Reset progress
-                  // Clear file input
-                  if (fileInputRef.current) {
-                    fileInputRef.current.value = '';
-                  }
-                  // Reset code to initial state
-                  setCode(`
-                    <!DOCTYPE html>
-                    <html lang="en">
-                    <head>
-                      <meta charset="UTF-8">
-                      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                      <title>Screenshot to Code</title>
-                      <script src="https://cdn.tailwindcss.com"></script>
-                    </head>
-                    <body class="bg-gray-50 flex items-center justify-center min-h-screen">
-                      <div class="text-center">
-                        <div class="text-6xl mb-4">📸</div>
-                        <h1 class="text-2xl font-bold text-gray-800 mb-2">Upload a Screenshot</h1>
-                        <p class="text-gray-600 mb-4">Upload an image to start generating code</p>
-                        <div class="bg-white rounded-lg p-6 shadow-lg max-w-md mx-auto">
-                          <p class="text-sm text-gray-500">
-                            Click the "▶️ Play" button after uploading your screenshot to begin the code generation process.
-                          </p>
-                        </div>
-                      </div>
-                    </body>
-                    </html>
-                  `);
-                }}
-              >
-                Upload different image
-              </button>
-            </div>
-          )}
-
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            multiple
-            onChange={handleFileSelect}
-            className="hidden"
-          />
-        </div>
-
-        {/* Upload image preview area */}
-        {uploadedImage && (
-          <div className="p-4 border-b border-gray-100">
-            <h3 className="text-sm font-semibold text-gray-800 mb-2">📋 Target Design</h3>
-            <div className="bg-gray-50 rounded-lg p-2">
-              <img 
-                src={uploadedImage} 
-                alt="Uploaded screenshot" 
-                className="w-full h-auto rounded-md shadow-sm border border-gray-200"
-                style={{ maxHeight: '300px', objectFit: 'contain' }}
-                onLoad={() => console.log('Image rendered successfully')}
-                onError={(e) => {
-                  console.error('Image render error:', e);
-                  setLoadingError('Failed to display image');
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* 仅在design demo时显示 Design Prompt，在Target Design和Code Generation之间 */}
-        {isDesignDemo && (
-          <div className="p-4 border-b border-blue-200 bg-blue-50">
-            <h3 className="text-sm font-semibold text-blue-800 mb-2">📝 Design Prompt</h3>
-            <textarea
-              className="w-full min-h-[80px] border border-blue-300 rounded p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 bg-white"
-              placeholder="Describe your design prompt here..."
-              value={designPrompt}
-              onChange={e => setDesignPrompt(e.target.value)}
-            />
-          </div>
-        )}
-
-        {/* Generation progress and status info */}
-        <div className="flex-1 p-4 flex flex-col">
-          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-100">
-            <div className="text-center mb-4">
-              <div className="text-3xl mb-2">⚡</div>
-              <h3 className="text-lg font-semibold text-gray-800 mb-1">Code Generation</h3>
-              <p className="text-xs text-gray-600">
-                {!imageReady ? 'Please upload an image to start' : 
-                 playing ? 'Generating code from your design...' : 
-                 'Ready to generate code'}
-              </p>
-            </div>
-            
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-xs text-gray-600">Progress:</span>
-                <div className="w-full bg-gray-200 rounded-full h-2 ml-3">
-                  <div 
-                    className="bg-gradient-to-r from-blue-500 to-indigo-500 h-2 rounded-full transition-all duration-100" 
-                    style={{ width: `${Math.round(progress)}%` }}
-                  ></div>
-                </div>
-                <span className="text-xs font-medium text-gray-800 ml-2">
-                  {Math.round(progress)}%
-                </span>
-              </div>
-              
-              <div className="flex items-center justify-between">
-                <span className="text-xs text-gray-600">Current Step:</span>
-                <span className="text-xs font-medium text-gray-800">{step.caption || 'Loading images... Done!'}</span>
-              </div>
-              
-              <div className="flex items-center justify-between">
-                <span className="text-xs text-gray-600">Status:</span>
-                <span className={`text-xs font-medium flex items-center gap-1 ${
-                  playing ? 'text-green-600' : imageReady ? 'text-blue-600' : 'text-gray-600'
-                }`}>
-                  {playing ? (
-                    <>
-                      <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
-                      Generating
-                    </>
-                  ) : imageReady ? (
-                    <>
-                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
-                      Ready
-                    </>
-                  ) : (
-                    <>
-                      <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
-                      Waiting
-                    </>
-                  )}
-                </span>
-              </div>
-            </div>
-            
-            {loadingError && (
-              <div className="mt-3 text-xs text-red-600 bg-red-50 p-2 rounded border border-red-200">
-                {loadingError}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Right side - Preview area */}
-      <div className="w-3/5 bg-white flex flex-col">
-        {/* Preview header */}
-        <div className="border-b border-gray-200 p-4">
-          <div className="flex items-center justify-between">
-            <h2 className="text-lg font-semibold text-gray-900">Live Preview</h2>
-            <div className="flex items-center space-x-4">
-              <button 
-                className={`px-3 py-1 rounded text-sm transition-colors ${
-                  !imageReady 
-                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                    : playing 
-                      ? 'bg-red-500 text-white hover:bg-red-600' 
-                      : 'bg-green-500 text-white hover:bg-green-600'
-                }`}
-                onClick={handlePlayToggle}
-                disabled={!imageReady}
-                title={!imageReady ? 'Please upload an image first' : ''}
-              >
-                {playing ? '⏸️ Pause' : '▶️ Play'}
-              </button>
-              <button 
-                className={`px-3 py-1 rounded text-sm transition-colors ${
-                  !imageReady
-                    ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                }`}
-                onClick={handleReset}
-                disabled={!imageReady}
-              >
-                🔄 Reset
-              </button>
-              <div className="flex items-center space-x-2">
-                <div className="w-24 bg-gray-200 rounded-full h-2">
-                  <div 
-                    className="bg-blue-600 h-2 rounded-full transition-all duration-100" 
-                    style={{ width: `${Math.round(progress)}%` }}
-                  ></div>
-                </div>
-                <span className="text-xs text-gray-500 min-w-0">
-                  {Math.round(progress)}%
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Preview content - using ScaledPreview component */}
-        <div className="flex-1 p-0">
-          <div className="w-full h-full bg-white overflow-hidden">
-            <ScaledPreview code={code} demoId={currentDemo?.id} />
-          </div>
-        </div>
-
-        {/* Bottom control bar */}
-        <div className="border-t border-gray-200 p-4">
-          <div className="flex items-center space-x-4">
-            <input
-              type="range"
-              min={0}
-              max={100}
-              value={Math.round(progress)}
-              onChange={e => {
-                const newProgress = Number(e.target.value);
-                setProgress(newProgress);
-                // Calculate corresponding step based on progress
-                const targetStepIndex = Math.floor((newProgress / 100) * steps.length);
-                if (targetStepIndex < steps.length) {
-                  setIdx(targetStepIndex);
-                }
-              }}
-              className="flex-1"
-              disabled={!imageReady}
-            />
-            <div className="text-sm text-gray-500 min-w-0">
-              {step.caption || step.description || 'Loading images... Done!'}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/screencoder/demo/src/DemoSelector.jsx b/screencoder/demo/src/DemoSelector.jsx
deleted file mode 100644
index deef277295fa864ed392ba2ff859aaaaf866bf8a..0000000000000000000000000000000000000000
--- a/screencoder/demo/src/DemoSelector.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export default function DemoSelector({ onDemoSelect, currentDemo }) {
-  const [demos, setDemos] = useState([]);
-  const [categories, setCategories] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [selectedCategory, setSelectedCategory] = useState('all');
-
-  useEffect(() => {
-    fetch('/demos.json')
-      .then(res => res.json())
-      .then(data => {
-        setDemos(data.demos);
-        setCategories(data.categories);
-        setLoading(false);
-      })
-      .catch(err => {
-        console.error('Failed to load demos:', err);
-        setLoading(false);
-      });
-  }, []);
-
-  const filteredDemos = selectedCategory === 'all' 
-    ? demos 
-    : demos.filter(demo => demo.category === selectedCategory);
-
-
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-lg text-gray-600">Loading demos...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6">
-      <h2 className="text-2xl font-bold text-gray-900 mb-6">Choose a Demo</h2>
-      
-      {/* Category Filter */}
-      <div className="mb-6">
-        <div className="flex flex-wrap gap-2">
-          <button
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-              selectedCategory === 'all'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-            }`}
-            onClick={() => setSelectedCategory('all')}
-          >
-            All Categories
-          </button>
-          {categories.map(category => (
-            <button
-              key={category.id}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
-                selectedCategory === category.id
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-              onClick={() => setSelectedCategory(category.id)}
-            >
-              {category.name}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Demo Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {filteredDemos.map(demo => (
-          <div
-            key={demo.id}
-            className={`bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer border-2 ${
-              currentDemo?.id === demo.id ? 'border-blue-500' : 'border-transparent'
-            }`}
-            onClick={() => onDemoSelect(demo)}
-          >
-            <div className="aspect-video bg-gray-200 rounded-t-lg overflow-hidden">
-              <img
-                src={demo.thumbnail}
-                alt={demo.name}
-                className="w-full h-full object-cover"
-                onError={(e) => {
-                  e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDMwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjE1MCIgeT0iMTAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjOUI5QkEwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiPkltYWdlIE5vdCBGb3VuZDwvdGV4dD4KPC9zdmc+';
-                }}
-              />
-            </div>
-            <div className="p-4">
-              <div className="mb-2">
-                <h3 className="text-lg font-semibold text-gray-900">{demo.name}</h3>
-              </div>
-              <p className="text-gray-600 text-sm mb-3">{demo.description}</p>
-              <div className="flex items-center justify-between text-sm text-gray-500">
-                <span>⏱️ {demo.estimatedTime}</span>
-                <span>📋 {demo.steps} steps</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {filteredDemos.length === 0 && (
-        <div className="text-center py-12">
-          <div className="text-gray-500 text-lg">No demos found in this category</div>
-        </div>
-      )}
-    </div>
-  );
-} 
\ No newline at end of file
diff --git a/screencoder/demo/src/index.css b/screencoder/demo/src/index.css
deleted file mode 100644
index 827599baf5f34b06aa0d08805cb000931b02eb88..0000000000000000000000000000000000000000
--- a/screencoder/demo/src/index.css
+++ /dev/null
@@ -1 +0,0 @@
-body { margin: 0; }
\ No newline at end of file
diff --git a/screencoder/demo/src/main.jsx b/screencoder/demo/src/main.jsx
deleted file mode 100644
index 2e676fb04d5c7102298879cc41df291dfb549d30..0000000000000000000000000000000000000000
--- a/screencoder/demo/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
\ No newline at end of file
diff --git a/screencoder/demo/vite.config.js b/screencoder/demo/vite.config.js
deleted file mode 100644
index 517b498e9b44355133cb87d6e353edb8df7dbde2..0000000000000000000000000000000000000000
--- a/screencoder/demo/vite.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  base: './',
-  server: { port: 5173 }
-});
\ No newline at end of file