Spaces:

DevForML
/

scet_v2

Running

App Files Files Community

DevForML commited on 14 days ago

Commit

015a372

verified ·

1 Parent(s): a6d04c8

Upload 70 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.gitattributes +13 -0
assests/.DS_Store +0 -0
assests/certification/coursera.png +0 -0
assests/certification/deeplearning.png +0 -0
assests/certification/nptel-logo.png +0 -0
assests/cw2_company.jpg +0 -0
assests/embedding_links/COT_Chain_Of_thought_example.png +0 -0
assests/embedding_links/arena.ai_leaderboard (2).png +3 -0
assests/embedding_links/links.txt +3 -0
assests/embedding_links/mteb-leaderboard.hf.space_.png +3 -0
assests/html_sample/brain_motion_v4.zip +3 -0
assests/html_sample/index1.html +553 -0
assests/html_sample/index2.html +1464 -0
assests/html_sample/index3.html +1587 -0
assests/html_sample/index4.html +1666 -0
assests/html_sample/ping_pong.html +0 -0
assests/illustration/COT_Chain_Of_thought_example.png +0 -0
assests/illustration/agent_working_story.jpg +3 -0
assests/illustration/anthropic-light.svg +1 -0
assests/illustration/docling.svg +305 -0
assests/illustration/huggingface-color.svg +1 -0
assests/illustration/langchain (1).webp +0 -0
assests/illustration/langchain-color.svg +1 -0
assests/illustration/llamaindex-color.svg +1 -0
assests/illustration/rag_indexing.avif +0 -0
assests/illustration/rag_retrieval_generation.avif +0 -0
assests/illustration/smolagent.webp +0 -0
assests/illustration/unstructured-color.svg +1 -0
assests/learning reference/2 blue 3 brown.jpg +0 -0
assests/learning reference/5 minutes engineering.jpg +0 -0
assests/learning reference/analytics_india_magazine_logo.jpg +0 -0
assests/learning reference/arenaai_logo.jpg +0 -0
assests/learning reference/campusx.jpg +0 -0
assests/learning reference/codewithharry.jpg +0 -0
assests/learning reference/evolving_ai_logo.jpg +0 -0
assests/learning reference/graduate_ml.jpg +0 -0
assests/learning reference/krish_naik.jpg +0 -0
assests/learning reference/nptel.jpg +0 -0
assests/learning reference/varun mayya.jpg +0 -0
assests/linkedin bg (4).png +3 -0
assests/linkedin-profile-card.html +166 -0
assests/logos set whites/anthropic (1).svg +1 -0
assests/logos set whites/antigravity-color.svg +1 -0
assests/logos set whites/claude-color.svg +1 -0
assests/logos set whites/codex-color (1).svg +1 -0
assests/logos set whites/deepseek-color.svg +1 -0
assests/logos set whites/gemini-color (1).svg +1 -0
assests/logos set whites/grok.svg +1 -0
assests/logos set whites/huggingface-color.svg +1 -0
assests/logos set whites/kimi-color.svg +1 -0

.gitattributes CHANGED Viewed

@@ -38,3 +38,16 @@ assets/user/embedding/mteb-leaderboard.png filter=lfs diff=lfs merge=lfs -text
 assets/user/illustration/agent-workflow.jpg filter=lfs diff=lfs merge=lfs -text
 assets/user/linkedin/banner.png filter=lfs diff=lfs merge=lfs -text
 assets/user/linkedin/profile.png filter=lfs diff=lfs merge=lfs -text

 assets/user/illustration/agent-workflow.jpg filter=lfs diff=lfs merge=lfs -text
 assets/user/linkedin/banner.png filter=lfs diff=lfs merge=lfs -text
 assets/user/linkedin/profile.png filter=lfs diff=lfs merge=lfs -text
+assests/embedding_links/arena.ai_leaderboard[[:space:]](2).png filter=lfs diff=lfs merge=lfs -text
+assests/embedding_links/mteb-leaderboard.hf.space_.png filter=lfs diff=lfs merge=lfs -text
+assests/illustration/agent_working_story.jpg filter=lfs diff=lfs merge=lfs -text
+assests/linkedin[[:space:]]bg[[:space:]](4).png filter=lfs diff=lfs merge=lfs -text
+assests/profile-pic.png filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/body_animationv1.svg filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/bodyanimationv2.webm filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/brain-1791631278192.svg filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/brain-1791631695827.svg filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/embedding_model.gif filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/mcp_architecture.png filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/mcp_componenet_illustration.png filter=lfs diff=lfs merge=lfs -text
+assests/slide_wise_new/React_chain_of_thought.png filter=lfs diff=lfs merge=lfs -text

assests/.DS_Store ADDED Viewed

Binary file (6.15 kB). View file

assests/certification/coursera.png ADDED Viewed

assests/certification/deeplearning.png ADDED Viewed

assests/certification/nptel-logo.png ADDED Viewed

assests/cw2_company.jpg ADDED Viewed

assests/embedding_links/COT_Chain_Of_thought_example.png ADDED Viewed

assests/embedding_links/arena.ai_leaderboard (2).png ADDED Viewed

Git LFS Details

SHA256: 242dbba55ac27ed8d9ff0815c851fb34a67791aff88c21465fceb0161a0c9296
Pointer size: 131 Bytes
Size of remote file: 218 kB

assests/embedding_links/links.txt ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ mteb leaderboard - https://mteb-leaderboard.hf.space/
2	+ lmarena leaderboard - https://lmarena-ai-arena-leaderboard.static.hf.space
3	+

assests/embedding_links/mteb-leaderboard.hf.space_.png ADDED Viewed

Git LFS Details

SHA256: d33d5d8a65277b47d96940986111a2f97cd93a9e401ff7e9e128eaf90c447369
Pointer size: 131 Bytes
Size of remote file: 176 kB

assests/html_sample/brain_motion_v4.zip ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:48a69c13e697f21cc078a52a27598d65a71aa6d5fa7903ae6c4c3fce5682ad49
+size 48385

assests/html_sample/index1.html ADDED Viewed

	@@ -0,0 +1,553 @@

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Brain Motion — SVG Video Studio + Color Grade</title>
+<style>
+  :root{
+    color-scheme: dark;
+    --bg:#090b11;
+    --panel:#131826f2;
+    --panel-2:#1b2231;
+    --line:#2a3446;
+    --text:#eef2fb;
+    --muted:#96a3b8;
+    --accent:#8d7eff;
+    --accent-2:#6358d6;
+    --radius:18px;
+  }
+  *{box-sizing:border-box}
+  body{
+    margin:0; min-height:100vh; background:var(--bg); color:var(--text);
+    font:14px/1.5 Inter,system-ui,Segoe UI,Roboto,sans-serif;
+    overflow-x:hidden;
+  }
+  body:before,body:after{
+    content:""; position:fixed; width:70vw; height:70vw; border-radius:50%; filter:blur(90px); opacity:.18; pointer-events:none; z-index:-1;
+  }
+  body:before{ left:-20vw; top:-20vw; background:radial-gradient(circle at 30% 30%, #8d7eff, transparent 60%)}
+  body:after{ right:-15vw; bottom:-10vw; background:radial-gradient(circle at 30% 30%, #3de4c8, #5b6cff 60%)}
+  .app{ width:min(1480px,100%); margin:auto; padding:22px 22px 28px}
+  .topbar{ display:flex; gap:16px; align-items:center; margin-bottom:18px}
+  .logo{
+    width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
+    background:conic-gradient(from 180deg, #a99cff, #6e64ff, #48e6c2, #a99cff);
+    box-shadow:0 8px 30px #7a6dff55; font-size:22px; color:white; flex:0 0 auto
+  }
+  h1{ margin:0; font-size:clamp(20px,3vw,30px); letter-spacing:-.04em; line-height:1.1}
+  .subtitle{ margin:4px 0 0; color:var(--muted)}
+  .workspace{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:18px; align-items:start}
+  .panel,.stage{ border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); backdrop-filter: blur(18px)}
+  .panel{ padding:16px 16px 10px; max-height:calc(100vh - 96px); overflow:auto}
+  .stage{ padding:14px}
+  .section{ padding:14px 0 16px; border-top:1px solid #222c3b}
+  .section:first-child{ border-top:0; padding-top:4px}
+  h2{ margin:0 0 10px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#c8d0de}
+  .btn{
+    min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:11px;
+    background:var(--panel-2); color:var(--text); cursor:pointer; transition:.15s; font-weight:600
+  }
+  .btn:hover:not(:disabled){ border-color:#7b72e0; background:#252f42}
+  .btn.primary{ background:var(--accent-2); border-color:var(--accent-2); color:white}
+  .btn.primary:hover{ background:#756ae8}
+  .btn:disabled{ opacity:.45; cursor:not-allowed}
+  .button-row{ display:flex; flex-wrap:wrap; gap:8px}
+  .small-note,.status,.icon-status{ color:var(--muted); font-size:12px; line-height:1.4}
+  .icon-status{ min-height:18px; margin:8px 0 0; overflow-wrap:anywhere}
+  .control{ margin:12px 0}
+  .control-label{ display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; color:#d6deea; font-size:13px}
+  .control-label output{ color:#b8aaff; font-variant-numeric:tabular-nums}
+  input[type=range]{ width:100%; accent-color:var(--accent)}
+  select,input[type=number]{ width:100%; min-height:38px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:#101522; color:var(--text)}
+  input[type=color]{ width:46px; height:34px; padding:2px; border:1px solid var(--line); border-radius:8px; background:#101522}
+  .toggle-row{ display:flex; flex-wrap:wrap; gap:12px; margin:10px 0}
+  .toggle{ display:flex; gap:8px; align-items:center; color:#d6deea}
+  .toggle input{ accent-color:var(--accent)}
+  .color-row{ display:flex; justify-content:space-between; align-items:center; gap:10px}
+  .export-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px}
+  .export-grid .btn{ min-height:48px}
+  .preview{
+    position:relative; display:grid; place-items:center; min-height:360px; overflow:hidden;
+    border:1px solid #2d384a; border-radius:14px;
+    background-color:#10141c;
+    background-image: linear-gradient(45deg,#1a2130 25%,transparent 25%), linear-gradient(-45deg,#1a2130 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#1a2130 75%), linear-gradient(-45deg,transparent 75%,#1a2130 75%);
+    background-size:22px 22px; background-position:0 0,0 11px,11px -11px,-11px 0
+  }
+  canvas{ display:block; width:100%; height:auto; max-height:72vh; object-fit:contain}
+  .placeholder{ position:absolute; padding:20px; text-align:center; color:var(--muted); pointer-events:none}
+  .timeline{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; margin-top:12px}
+  .time-label{ min-width:78px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
+  .hidden-input,#sourceVideo{ display:none}
+  .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#1e2635; border:1px solid #2a3446; font-size:11px; color:#b9c4d6}
+  @media(max-width:980px){ .workspace{ grid-template-columns:1fr} .panel{ max-height:none} .preview{ min-height:240px} }
+</style>
+</head>
+<body>
+<div class="app">
+  <header class="topbar">
+    <div class="logo">✦</div>
+    <div>
+      <h1>Brain Motion — SVG Video Studio</h1>
+      <p class="subtitle">Video → SVG cells with transparent export + full color grading. Works as a static site.</p>
+    </div>
+    <span class="chip">Fable Edition • Color Grade</span>
+  </header>
+  <div class="workspace">
+    <aside class="panel">
+      <section class="section">
+        <h2>1. Media</h2>
+        <div class="button-row">
+          <button class="btn primary" id="uploadVideoBtn" data-lock>Choose video / image</button>
+          <button class="btn" id="addSvgBtn" data-lock>Add SVGs</button>
+          <button class="btn" id="clearSvgBtn" data-lock>Clear</button>
+        </div>
+        <input class="hidden-input" id="videoInput" type="file" accept="video/*,image/*">
+        <input class="hidden-input" id="svgInput" type="file" accept=".svg,image/svg+xml" multiple>
+        <video id="sourceVideo" playsinline muted></video>
+        <p class="icon-status" id="iconStatus">No SVGs — fallback shapes will be used.</p>
+        <p class="small-note">Drop any number of SVG files. Each cell cycles through them. You can also drop an image — it will be treated as a still.</p>
+      </section>
+      <section class="section">
+        <h2>2. Cells</h2>
+        <div class="control"><label class="control-label" for="cellSize"><span>Spacing</span><output id="cellValue">14 px</output></label><input id="cellSize" data-lock type="range" min="6" max="40" value="14"></div>
+        <div class="control"><label class="control-label" for="scale"><span>Size</span><output id="scaleValue">0.95</output></label><input id="scale" data-lock type="range" min="0.25" max="1.8" step="0.05" value="0.95"></div>
+        <div class="control"><label class="control-label" for="gap"><span>Gap</span><output id="gapValue">1 px</output></label><input id="gap" data-lock type="range" min="0" max="12" step="0.5" value="1"></div>
+        <div class="control"><label class="control-label" for="sizeMode">Size follows</label><select id="sizeMode" data-lock><option value="bright">Bright = larger</option><option value="dark">Dark = larger</option></select></div>
+        <div class="control"><label class="control-label" for="fallbackShape">Fallback shape</label><select id="fallbackShape" data-lock><option value="circle">Circle</option><option value="square">Square</option><option value="triangle">Triangle</option><option value="star">Star</option><option value="diamond">Diamond</option><option value="cross">Cross</option></select></div>
+        <div class="control"><label class="control-label" for="colorMode">SVG tint</label><select id="colorMode" data-lock><option value="sample">Tint to video color</option><option value="custom">Custom Color / Palette</option><option value="shadesBlack">Shades of Black</option><option value="white">White</option><option value="native">Keep SVG colors</option></select></div>
+        <div class="color-row" id="customColorRow" style="margin:8px 0; display:none"><label for="customColor">Tint color</label><input id="customColor" data-lock type="color" value="#050505"></div>
+        <div class="toggle-row"><label class="toggle"><input id="rotate" data-lock type="checkbox"> Rotate by luma</label></div>
+      </section>
+      <section class="section">
+        <h2>3. Color Grading</h2>
+        <div class="control"><label class="control-label" for="gradePreset">Preset</label><select id="gradePreset" data-lock>
+          <option value="neutral">Neutral</option>
+          <option value="warmFilm">Warm Film</option>
+          <option value="coolTech">Cool Tech</option>
+          <option value="cyberpunk">Cyberpunk</option>
+          <option value="fable">Fable Pastel</option>
+          <option value="sunset">Sunset</option>
+          <option value="bwHigh">B&W High Contrast</option>
+        </select></div>
+        <div class="toggle-row">
+          <label class="toggle"><input id="enableGrade" data-lock type="checkbox" checked> Enable grading</label>
+          <button class="btn" id="resetGrade" data-lock>Reset</button>
+        </div>
+        <div class="control"><label class="control-label" for="exposure"><span>Exposure</span><output id="exposureValue">0</output></label><input id="exposure" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="brightness"><span>Brightness</span><output id="brightnessValue">0</output></label><input id="brightness" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="contrast"><span>Contrast</span><output id="contrastValue">0</output></label><input id="contrast" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="saturation"><span>Saturation</span><output id="saturationValue">100%</output></label><input id="saturation" data-lock type="range" min="0" max="200" value="100"></div>
+        <div class="control"><label class="control-label" for="hue"><span>Hue shift</span><output id="hueValue">0°</output></label><input id="hue" data-lock type="range" min="-180" max="180" value="0"></div>
+        <div class="control"><label class="control-label" for="temperature"><span>Temperature</span><output id="temperatureValue">0</output></label><input id="temperature" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="tint"><span>Tint (G/M)</span><output id="tintValue">0</output></label><input id="tint" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="vibrance"><span>Vibrance</span><output id="vibranceValue">0</output></label><input id="vibrance" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="highlights"><span>Highlights</span><output id="highlightsValue">0</output></label><input id="highlights" data-lock type="range" min="-100" max="100" value="0"></div>
+        <div class="control"><label class="control-label" for="shadows"><span>Shadows</span><output id="shadowsValue">0</output></label><input id="shadows" data-lock type="range" min="-100" max="100" value="0"></div>
+        <p class="small-note">Grading is applied before cell sampling, so it affects tint + size logic.</p>
+      </section>
+      <section class="section">
+        <h2>4. Background & Export</h2>
+        <div class="toggle-row"><label class="toggle"><input id="transparent" data-lock type="checkbox" checked> Transparent bg</label></div>
+        <div class="color-row"><label for="bgColor">Opaque bg color</label><input id="bgColor" data-lock type="color" value="#10141b"></div>
+        <div class="control"><label class="control-label" for="backgroundMode">Cut out</label><select id="backgroundMode" data-lock><option value="dark">Dark pixels</option><option value="light">Light pixels</option><option value="none">None</option></select></div>
+        <div class="control"><label class="control-label" for="cutoff"><span>Cut threshold</span><output id="cutoffValue">5%</output></label><input id="cutoff" data-lock type="range" min="0" max="95" value="5"></div>
+        <div class="control"><label class="control-label" for="outputWidth">Output width</label><input id="outputWidth" data-lock type="number" min="240" max="1280" step="80" value="640"></div>
+        <div class="control"><label class="control-label" for="duration">Export seconds</label><input id="duration" data-lock type="number" min="0.5" max="15" step="0.5" value="4"></div>
+        <div class="control"><label class="control-label" for="fps">Export FPS</label><input id="fps" data-lock type="number" min="4" max="20" step="1" value="12"></div>
+        <div class="button-row" style="margin:12px 0 8px"><button class="btn" id="playPause" disabled data-lock>Play</button><button class="btn" id="saveFrame" data-lock>Save PNG</button></div>
+        <div class="export-grid">
+          <button class="btn primary" id="exportSvg" disabled data-lock>Animated SVG</button>
+          <button class="btn" id="exportGif" disabled data-lock>GIF</button>
+          <button class="btn" id="exportWebm" disabled data-lock>WebM</button>
+          <button class="btn" id="exportMp4" disabled data-lock>MP4</button>
+        </div>
+        <p class="small-note">GIF = 1-bit transparency. MP4 = always opaque. WebM alpha = browser dependent.</p>
+      </section>
+    </aside>
+    <section class="stage">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
+        <h2 style="margin:0">Preview</h2><span class="small-note">Checker = transparent</span>
+      </div>
+      <div class="preview" id="previewBox">
+        <canvas id="canvas" width="640" height="360"></canvas>
+        <div class="placeholder" id="placeholder">Choose a video or image.<br>Add SVG icons to use them as cells.</div>
+      </div>
+      <div class="timeline">
+        <button class="btn" id="timelinePlay" disabled data-lock>Play</button>
+        <input id="seek" type="range" min="0" max="1000" value="0" disabled data-lock>
+        <span class="time-label" id="timeLabel">0:00 / 0:00</span>
+      </div>
+      <p class="status" id="status">Ready.</p>
+    </section>
+  </div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
+<script>
+(() => {
+'use strict';
+const $ = id => document.getElementById(id);
+const video = $('sourceVideo');
+const canvas = $('canvas');
+const ctx = canvas.getContext('2d',{alpha:true});
+const sampleCanvas = document.createElement('canvas');
+const sampleCtx = sampleCanvas.getContext('2d',{willReadFrequently:true});
+const tintCanvas = document.createElement('canvas'); tintCanvas.width=32; tintCanvas.height=32;
+const tintCtx = tintCanvas.getContext('2d');
+let videoUrl=null, svgAssets=[], busy=false, recordingOpaque=false, lastRenderedTime=-1;
+let sourceImage=null, isImageMode=false;
+const GRADE_PRESETS={
+ neutral:{exposure:0,brightness:0,contrast:0,saturation:100,hue:0,temperature:0,tint:0,vibrance:0,highlights:0,shadows:0},
+ warmFilm:{exposure:5,brightness:4,contrast:8,saturation:110,hue:0,temperature:32,tint:-6,vibrance:18,highlights:-8,shadows:14},
+ coolTech:{exposure:0,brightness:0,contrast:14,saturation:92,hue:4,temperature:-38,tint:8,vibrance:6,highlights:0,shadows:8},
+ cyberpunk:{exposure:8,brightness:2,contrast:22,saturation:145,hue:-18,temperature:8,tint:-14,vibrance:32,highlights:-12,shadows:10},
+ fable:{exposure:6,brightness:8,contrast:-8,saturation:86,hue:2,temperature:14,tint:4,vibrance:-12,highlights:-14,shadows:12},
+ sunset:{exposure:10,brightness:6,contrast:12,saturation:128,hue:-8,temperature:58,tint:-8,vibrance:22,highlights:-10,shadows:16},
+ bwHigh:{exposure:4,brightness:2,contrast:38,saturation:0,hue:0,temperature:0,tint:0,vibrance:0,highlights:-6,shadows:10}
+};
+function setStatus(m){ $('status').textContent=m }
+function clamp(v,a,b){ return Math.max(a,Math.min(b,v)) }
+function clamp01(v){ return Math.max(0,Math.min(1,v)) }
+function rgb01ToHsl(r,g,b){
+  const max=Math.max(r,g,b), min=Math.min(r,g,b);
+  let h=0,s=0,l=(max+min)/2;
+  if(max!==min){
+    const d=max-min;
+    s=l>0.5? d/(2-max-min): d/(max+min);
+    switch(max){
+      case r: h=(g-b)/d + (g<b?6:0); break;
+      case g: h=(b-r)/d +2; break;
+      case b: h=(r-g)/d +4; break;
+    }
+    h/=6;
+  }
+  return [h,s,l];
+}
+function hslToRgb01(h,s,l){
+  let r,g,b;
+  if(s===0){ r=g=b=l; }
+  else{
+    const hue2rgb=(p,q,t)=>{ if(t<0)t+=1; if(t>1)t-=1; if(t<1/6)return p+(q-p)*6*t; if(t<1/2)return q; if(t<2/3)return p+(q-p)*(2/3-t)*6; return p; };
+    const q=l<0.5? l*(1+s): l+s-l*s; const p=2*l-q;
+    r=hue2rgb(p,q,h+1/3); g=hue2rgb(p,q,h); b=hue2rgb(p,q,h-1/3);
+  }
+  return [r,g,b];
+}
+function applyGrading(r,g,b,o){
+  let R=r/255,G=g/255,B=b/255;
+  const expFactor=Math.pow(2,o.exposure/100);
+  R*=expFactor; G*=expFactor; B*=expFactor;
+  const bright=o.brightness/100*0.35; R+=bright; G+=bright; B+=bright;
+  const temp=o.temperature/100;
+  if(temp>0){ R+=temp*0.18; G+=temp*0.04; B-=temp*0.14; } else { R+=temp*0.10; B-=temp*0.18; }
+  const tint=o.tint/100; G+=tint*0.14; R-=tint*0.05; B-=tint*0.05;
+  const cf=(259*(o.contrast+255))/(255*(259-o.contrast));
+  R=cf*(R-0.5)+0.5; G=cf*(G-0.5)+0.5; B=cf*(B-0.5)+0.5;
+  const luma=0.299*R+0.587*G+0.114*B;
+  const sh=o.shadows/100, hi=o.highlights/100;
+  if(luma<0.5){ const f=(0.5-luma)*1.6; R+=sh*f*0.22; G+=sh*f*0.22; B+=sh*f*0.22; }
+  else { const f=(luma-0.5)*1.6; R+=hi*f*0.22; G+=hi*f*0.22; B+=hi*f*0.22; }
+  let hsl=rgb01ToHsl(clamp01(R),clamp01(G),clamp01(B));
+  let h=hsl[0], s=hsl[1], l=hsl[2];
+  h=(h+o.hue/360)%1; if(h<0)h+=1;
+  s*=(o.saturation/100);
+  const vib=o.vibrance/100;
+  if(vib!==0){ s+= (1-s)*vib*0.7; }
+  s=clamp01(s); l=clamp01(l);
+  const rgb=hslToRgb01(h,s,l);
+  return [clamp01(rgb[0])*255, clamp01(rgb[1])*255, clamp01(rgb[2])*255];
+}
+function getGradeOpts(){
+  return {
+    enabled:$('enableGrade').checked,
+    exposure:+$('exposure').value, brightness:+$('brightness').value, contrast:+$('contrast').value,
+    saturation:+$('saturation').value, hue:+$('hue').value, temperature:+$('temperature').value,
+    tint:+$('tint').value, vibrance:+$('vibrance').value, highlights:+$('highlights').value, shadows:+$('shadows').value
+  };
+}
+function applyPreset(name){
+  const p=GRADE_PRESETS[name]; if(!p)return;
+  for(const k in p){ const el=$(k); if(el) el.value=p[k]; }
+  updateLabels(); renderSafely();
+}
+function updateLabels(){
+  $('cellValue').textContent=`${$('cellSize').value} px`;
+  $('scaleValue').textContent=(+$('scale').value).toFixed(2);
+  $('gapValue').textContent=`${$('gap').value} px`;
+  $('cutoffValue').textContent=`${$('cutoff').value}%`;
+  $('exposureValue').textContent=`${$('exposure').value>0?'+':''}${$('exposure').value}`;
+  $('brightnessValue').textContent=`${$('brightness').value>0?'+':''}${$('brightness').value}`;
+  $('contrastValue').textContent=`${$('contrast').value>0?'+':''}${$('contrast').value}`;
+  $('saturationValue').textContent=`${$('saturation').value}%`;
+  $('hueValue').textContent=`${$('hue').value}°`;
+  $('temperatureValue').textContent=`${$('temperature').value>0?'+':''}${$('temperature').value}`;
+  $('tintValue').textContent=`${$('tint').value>0?'+':''}${$('tint').value}`;
+  $('vibranceValue').textContent=`${$('vibrance').value>0?'+':''}${$('vibrance').value}`;
+  $('highlightsValue').textContent=`${$('highlights').value>0?'+':''}${$('highlights').value}`;
+  $('shadowsValue').textContent=`${$('shadows').value>0?'+':''}${$('shadows').value}`;
+}
+function resizeCanvas(){
+  const w = isImageMode ? (sourceImage?.naturalWidth||640) : (video.videoWidth||640);
+  const h = isImageMode ? (sourceImage?.naturalHeight||360) : (video.videoHeight||360);
+  if(!w||!h)return;
+  const wantW=clamp(+$('outputWidth').value||640,240,1280);
+  const ratio=Math.min(wantW/w,1280/h);
+  const nw=Math.max(1,Math.round(w*ratio)), nh=Math.max(1,Math.round(h*ratio));
+  if(canvas.width!==nw||canvas.height!==nh){ canvas.width=nw; canvas.height=nh; sampleCanvas.width=nw; sampleCanvas.height=nh; }
+}
+function drawAssetCentered(tCtx, asset, box){
+  const iw=asset.width||asset.image.naturalWidth||100, ih=asset.height||asset.image.naturalHeight||100;
+  const s=Math.min(box/iw,box/ih); tCtx.drawImage(asset.image,-iw*s/2,-ih*s/2,iw*s,ih*s);
+}
+function drawBuiltin(tCtx,type,size,color){
+  const r=size/2; tCtx.fillStyle=color; tCtx.beginPath();
+  switch(type){
+    case 'square': tCtx.rect(-r,-r,size,size); break;
+    case 'triangle': tCtx.moveTo(0,-r); tCtx.lineTo(r,r); tCtx.lineTo(-r,r); tCtx.closePath(); break;
+    case 'star': for(let i=0;i<10;i++){ const a=-Math.PI/2+i*Math.PI/5, rad=i%2===0?r:r*0.43, x=Math.cos(a)*rad, y=Math.sin(a)*rad; i? tCtx.lineTo(x,y): tCtx.moveTo(x,y);} tCtx.closePath(); break;
+    case 'diamond': tCtx.moveTo(0,-r); tCtx.lineTo(r,0); tCtx.lineTo(0,r); tCtx.lineTo(-r,0); tCtx.closePath(); break;
+    case 'cross': tCtx.rect(-r*0.28,-r,r*0.56,size); tCtx.rect(-r,-r*0.28,size,r*0.56); break;
+    default: tCtx.arc(0,0,r,0,Math.PI*2);
+  } tCtx.fill();
+}
+function drawTintedAsset(asset,color,size){
+  tintCtx.clearRect(0,0,32,32); tintCtx.save(); tintCtx.translate(16,16); drawAssetCentered(tintCtx,asset,30); tintCtx.restore();
+  tintCtx.globalCompositeOperation='source-in'; tintCtx.fillStyle=color; tintCtx.fillRect(0,0,32,32); tintCtx.globalCompositeOperation='source-over';
+  ctx.drawImage(tintCanvas,-size/2,-size/2,size,size);
+}
+function syncButtons(){
+  const has=isImageMode||!!video.videoWidth;
+  $('playPause').disabled=busy||!has||isImageMode;
+  $('timelinePlay').disabled=busy||!has||isImageMode;
+  $('seek').disabled=busy||!has||isImageMode;
+  ['exportSvg','exportGif','exportWebm','exportMp4'].forEach(id=>$(id).disabled=busy||!has);
+}
+function setBusy(v){ busy=v; document.querySelectorAll('[data-lock]').forEach(el=>el.disabled=v); syncButtons(); }
+function renderFrame(forceOpaque=false){
+  if(isImageMode){
+    if(!sourceImage) return;
+    resizeCanvas(); const W=canvas.width,H=canvas.height;
+    sampleCtx.drawImage(sourceImage,0,0,W,H);
+  } else {
+    if(!video.videoWidth||video.readyState<2) return;
+    resizeCanvas();
+    sampleCtx.drawImage(video,0,0,canvas.width,canvas.height);
+  }
+  const W=canvas.width,H=canvas.height;
+  const pixels=sampleCtx.getImageData(0,0,W,H).data;
+  ctx.clearRect(0,0,W,H);
+  const isTrans=$('transparent').checked && !forceOpaque;
+  if(!isTrans){ ctx.fillStyle=$('bgColor').value; ctx.fillRect(0,0,W,H); }
+  const cell=+$('cellSize').value, scaleSet=+$('scale').value, gap=+$('gap').value;
+  const cutoff=+$('cutoff').value/100, cols=Math.ceil(W/cell), rows=Math.ceil(H/cell);
+  const sizeMode=$('sizeMode').value, bgMode=$('backgroundMode').value, colorMode=$('colorMode').value, rot=$('rotate').checked, fallback=$('fallbackShape').value;
+  const grade=getGradeOpts();
+  const contrastFactor=(259*(grade.contrast+255))/(255*(259-grade.contrast));
+  for(let r=0;r<rows;r++){
+    const y=r*cell;
+    for(let c=0;c<cols;c++){
+      const x=c*cell, sx=Math.min(W-1,Math.floor(x+cell/2)), sy=Math.min(H-1,Math.floor(y+cell/2)), idx=(sy*W+sx)*4;
+      const a=pixels[idx+3]/255; if(a<0.04) continue;
+      let R=pixels[idx], G=pixels[idx+1], B=pixels[idx+2];
+      if(grade.enabled){ [R,G,B]=applyGrading(R,G,B,grade); }
+      else { R=clamp(contrastFactor*(R-128)+128,0,255); G=clamp(contrastFactor*(G-128)+128,0,255); B=clamp(contrastFactor*(B-128)+128,0,255); }
+      const luma=(0.299*R+0.587*G+0.114*B)/255;
+      if(bgMode==='dark'&&luma<cutoff) continue;
+      if(bgMode==='light'&&luma>1-cutoff) continue;
+      const bright=sizeMode==='dark'?1-luma:luma;
+      const size=Math.min(cell*1.8, Math.max(0, cell*scaleSet*(0.12+0.88*bright)-gap));
+      const customTint = $('customColor').value || '#050505';
+      let col;
+      if(colorMode==='white') col = '#ffffff';
+      else if(colorMode==='custom') col = customTint;
+      else if(colorMode==='shadesBlack') {
+        const shade = Math.round(luma * 45);
+        col = `rgb(${shade},${shade},${shade})`;
+      } else col = `rgb(${Math.round(R)},${Math.round(G)},${Math.round(B)})`;
+      const asset=svgAssets.length? svgAssets[(r*cols+c)%svgAssets.length]: null;
+      ctx.save(); ctx.translate(x+cell/2,y+cell/2); ctx.globalAlpha=a;
+      if(rot) ctx.rotate((luma-0.5)*Math.PI);
+      if(asset){ if(colorMode==='native') drawAssetCentered(ctx,asset,size); else drawTintedAsset(asset,col,size); }
+      else drawBuiltin(ctx,fallback,size,col);
+      ctx.restore();
+    }
+  }
+  if(!isImageMode) lastRenderedTime=video.currentTime;
+  $('placeholder').style.display='none';
+}
+function renderSafely(){ try{ renderFrame(recordingOpaque); }catch(e){ console.error(e); setStatus('Preview error: '+e.message); } }
+function sanitizeSvg(src){
+  const doc=new DOMParser().parseFromString(src,'image/svg+xml');
+  if(doc.querySelector('parsererror')) throw new Error('Invalid SVG');
+  const root=doc.documentElement; if(!root||root.localName.toLowerCase()!=='svg') throw new Error('No <svg>');
+  const blocked=new Set(['script','foreignobject','iframe','object','embed']);
+  for(const el of [...root.querySelectorAll('*')]){
+    if(blocked.has(el.localName.toLowerCase())){ el.remove(); continue; }
+    for(const at of [...el.attributes]){
+      const n=at.name.toLowerCase(), v=at.value.trim();
+      if(n.startsWith('on')) el.removeAttributeNode(at);
+      else if((n==='href'||n==='xlink:href'||n==='src')&&v&&!v.startsWith('#')&&!/^data:image\//i.test(v)) el.removeAttributeNode(at);
+      else if(/url\(\s*(['"]?)(?:https?:|\/\/|file:|javascript:)/i.test(v)) el.removeAttributeNode(at);
+    }
+  }
+  for(const st of [...root.querySelectorAll('style')]) if(/@import|url\(\s*(['"]?)(?:https?:|\/\/|file:)/i.test(st.textContent)) st.remove();
+  if(!root.hasAttribute('xmlns')) root.setAttribute('xmlns','http://www.w3.org/2000/svg');
+  let vb=root.getAttribute('viewBox')||''; let vals=vb.trim().split(/[\s,]+/).map(Number);
+  let vw=100,vh=100;
+  if(vals.length===4&&vals.every(Number.isFinite)&&vals[2]>0&&vals[3]>0){ vw=vals[2]; vh=vals[3]; }
+  else { vw=parseFloat(root.getAttribute('width'))||100; vh=parseFloat(root.getAttribute('height'))||100; root.setAttribute('viewBox',`0 0 ${vw} ${vh}`); }
+  root.setAttribute('width',String(vw)); root.setAttribute('height',String(vh));
+  return {text:new XMLSerializer().serializeToString(root), width:vw, height:vh};
+}
+function loadSvgImage(file,parsed){
+  const blob=new Blob([parsed.text],{type:'image/svg+xml;charset=utf-8'}); const url=URL.createObjectURL(blob);
+  return new Promise((res,rej)=>{ const img=new Image(); img.onload=()=>res({name:file.name,image:img,url,width:parsed.width,height:parsed.height}); img.onerror=()=>{ URL.revokeObjectURL(url); rej(new Error('Cannot load '+file.name)); }; img.src=url; });
+}
+function updateIconStatus(){
+  if(!svgAssets.length){ $('iconStatus').textContent='No SVGs — fallback shapes.'; return; }
+  $('iconStatus').textContent=`${svgAssets.length} SVG(s): ${svgAssets.map(a=>a.name).join(', ')}`;
+}
+function clearSvg(){ for(const a of svgAssets) URL.revokeObjectURL(a.url); svgAssets=[]; updateIconStatus(); renderSafely(); }
+function formatTime(s){ if(!Number.isFinite(s)||s<0)s=0; const m=Math.floor(s/60), sec=Math.floor(s%60); return `${m}:${String(sec).padStart(2,'0')}`; }
+function updateTimeline(){ if(!video.videoWidth||!Number.isFinite(video.duration)||video.duration<=0){ $('timeLabel').textContent='0:00 / 0:00'; return;} $('seek').value=String(Math.round(video.currentTime/video.duration*1000)); $('timeLabel').textContent=`${formatTime(video.currentTime)} / ${formatTime(video.duration)}`; }
+function seekTo(sec){ return new Promise((res,rej)=>{ const d=video.duration, max=Number.isFinite(d)&&d>0? Math.max(0,d-0.01): Math.max(0,sec); const t=clamp(sec,0,max); if(!video.seeking&&Math.abs(video.currentTime-t)<0.001) return res(); let timer; const fin=()=>{ clearTimeout(timer); video.removeEventListener('seeked',fin); res(); }; video.addEventListener('seeked',fin); timer=setTimeout(fin,8000); try{ video.currentTime=t; }catch(e){ clearTimeout(timer); video.removeEventListener('seeked',fin); rej(e);} }); }
+function exportSettings(){ const fps=clamp(Math.round(+$('fps').value||12),4,20), secs=clamp(+$('duration').value||4,0.5,15), fc=Math.max(1,Math.ceil(secs*fps)); return {fps,frameCount:fc,duration:fc/fps}; }
+async function captureFrames(onFrame,label){
+  if(!video.videoWidth && !isImageMode) throw new Error('Choose media first');
+  const st=exportSettings(); const wasPlaying=!isImageMode&&!video.paused; const prev=video.currentTime; const md=Number.isFinite(video.duration)&&video.duration>0? video.duration:null;
+  if(!isImageMode) video.pause();
+  try{
+    for(let i=0;i<st.frameCount;i++){
+      if(!isImageMode){
+        const time=md? (i/st.fps)%md : i/st.fps; await seekTo(time); await new Promise(r=>requestAnimationFrame(r));
+      }
+      renderFrame(false); await onFrame(i,{...st,width:canvas.width,height:canvas.height}); setStatus(`${label}: frame ${i+1}/${st.frameCount}`);
+    }
+    return {...st,width:canvas.width,height:canvas.height};
+  } finally {
+    if(!isImageMode){ try{ await seekTo(prev);}catch(_){} if(wasPlaying) await video.play().catch(()=>{}); renderSafely(); updateTimeline(); }
+  }
+}
+function downloadBlob(blob,name){ const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(url),60000); }
+function numberText(v){ return Number(v.toFixed(6)).toString(); }
+function makeAnimatedSvg(frames,w,h,fps){
+  const c=frames.length, dur=c/fps, durT=numberText(dur);
+  const els=frames.map((d,i)=>{
+    let anim=''; if(c>1){ let vals,kt; if(i===0){ vals='visible;hidden;hidden'; kt=`0;${numberText(1/c)};1`; } else if(i===c-1){ vals='hidden;visible;hidden'; kt=`0;${numberText(i/c)};1`; } else { vals='hidden;visible;hidden;hidden'; kt=`0;${numberText(i/c)};${numberText((i+1)/c)};1`; } anim=`<animate attributeName="visibility" calcMode="discrete" values="${vals}" keyTimes="${kt}" dur="${durT}s" repeatCount="indefinite"/>`; }
+    const vis=i===0?'visible':'hidden'; return `<image x="0" y="0" width="${w}" height="${h}" visibility="${vis}" href="${d}" xlink:href="${d}">${anim}</image>`;
+  }).join('\n');
+  return `<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">\n${els}\n</svg>`;
+}
+$('uploadVideoBtn').addEventListener('click',()=>$('videoInput').click());
+$('addSvgBtn').addEventListener('click',()=>$('svgInput').click());
+$('videoInput').addEventListener('change',e=>{
+  const file=e.target.files&&e.target.files[0]; if(!file)return;
+  if(file.type.startsWith('image/')){
+    isImageMode=true; const url=URL.createObjectURL(file); const img=new Image();
+    img.onload=()=>{ sourceImage=img; resizeCanvas(); $('placeholder').style.display='none'; renderSafely(); syncButtons(); setStatus(`Image loaded: ${img.naturalWidth}×${img.naturalHeight}`); URL.revokeObjectURL(url); };
+    img.onerror=()=>setStatus('Cannot read image'); img.src=url;
+  } else {
+    isImageMode=false; sourceImage=null; video.pause(); if(videoUrl) URL.revokeObjectURL(videoUrl); videoUrl=URL.createObjectURL(file);
+    video.src=videoUrl; video.loop=true; video.muted=true; video.load(); $('placeholder').style.display='block'; setStatus(`Loading ${file.name}…`);
+  }
+  e.target.value='';
+});
+video.addEventListener('loadedmetadata',()=>{ resizeCanvas(); $('placeholder').style.display='none'; updateTimeline(); renderSafely(); syncButtons(); setStatus(`Video ${video.videoWidth}×${video.videoHeight}`); video.play().catch(()=>setStatus('Video loaded. Press Play.')); });
+video.addEventListener('loadeddata',renderSafely); video.addEventListener('seeked',()=>{ renderSafely(); updateTimeline(); }); video.addEventListener('timeupdate',updateTimeline);
+video.addEventListener('play',()=>{ $('playPause').textContent='Pause'; $('timelinePlay').textContent='Pause'; });
+video.addEventListener('pause',()=>{ $('playPause').textContent='Play'; $('timelinePlay').textContent='Play'; renderSafely(); });
+$('svgInput').addEventListener('change',async e=>{
+  const files=[...(e.target.files||[])]; e.target.value=''; let added=0;
+  for(const f of files){ if(!f.name.toLowerCase().endsWith('.svg')&&f.type!=='image/svg+xml') continue; try{ const parsed=sanitizeSvg(await f.text()); const asset=await loadSvgImage(f,parsed); svgAssets.push(asset); added++; }catch(err){ setStatus(err.message); } }
+  updateIconStatus(); renderSafely(); if(added) setStatus(`Added ${added} SVG(s)`);
+});
+$('clearSvgBtn').addEventListener('click',clearSvg);
+function togglePlay(){ if(isImageMode||!video.videoWidth) return; if(video.paused) video.play().catch(()=>setStatus('Cannot play')); else video.pause(); }
+$('playPause').addEventListener('click',togglePlay); $('timelinePlay').addEventListener('click',togglePlay);
+$('seek').addEventListener('input',e=>{ if(isImageMode||!video.videoWidth||!Number.isFinite(video.duration))return; video.pause(); video.currentTime=(+e.target.value/1000)*video.duration; });
+const allControls=['cellSize','scale','gap','sizeMode','fallbackShape','colorMode','customColor','rotate','transparent','bgColor','backgroundMode','cutoff','outputWidth','exposure','brightness','contrast','saturation','hue','temperature','tint','vibrance','highlights','shadows','enableGrade'];
+for(const id of allControls){ const el=$(id); if(!el)continue; el.addEventListener('input',()=>{ updateLabels(); renderSafely(); }); el.addEventListener('change',()=>{ updateLabels(); renderSafely(); }); }
+$('colorMode').addEventListener('change', e => {
+  $('customColorRow').style.display = e.target.value === 'custom' ? 'flex' : 'none';
+});
+$('gradePreset').addEventListener('change',e=>applyPreset(e.target.value));
+$('resetGrade').addEventListener('click',()=>applyPreset('neutral'));
+$('saveFrame').addEventListener('click',async()=>{
+  if(!canvas.width){ setStatus('No frame'); return; }
+  const blob=await new Promise(r=>canvas.toBlob(r,'image/png')); if(!blob){ setStatus('PNG fail'); return; }
+  downloadBlob(blob,`brain-${Date.now()}.png`); setStatus('Saved PNG with transparency');
+});
+$('exportSvg').addEventListener('click',async()=>{
+  setBusy(true); setStatus('SVG…');
+  try{
+    const frames=[]; const meta=await captureFrames(async()=>{ frames.push(canvas.toDataURL('image/png')); },'SVG');
+    const svg=makeAnimatedSvg(frames,meta.width,meta.height,meta.fps);
+    downloadBlob(new Blob([svg],{type:'image/svg+xml;charset=utf-8'}),`brain-${Date.now()}.svg`);
+    setStatus('Animated SVG saved (PNG frames inside SVG)');
+  }catch(e){ setStatus('SVG fail: '+e.message); } finally{ setBusy(false); }
+});
+async function fetchGifWorker(){ const url='https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js'; const r=await fetch(url); if(!r.ok) throw new Error('GIF worker download failed'); const t=await r.text(); return URL.createObjectURL(new Blob([t],{type:'application/javascript'})); }
+$('exportGif').addEventListener('click',async()=>{
+  if(!window.GIF){ setStatus('GIF lib not loaded'); return; }
+  setBusy(true); let wUrl=null;
+  try{
+    setStatus('GIF worker…'); wUrl=await fetchGifWorker();
+    const useTrans=$('transparent').checked; const tKey=0xff00ff;
+    const opts={workers:2,quality:10,repeat:0,width:canvas.width,height:canvas.height,workerScript:wUrl}; if(useTrans) opts.transparent=tKey;
+    const gif=new window.GIF(opts); const gc=document.createElement('canvas'); gc.width=canvas.width; gc.height=canvas.height; const gcCtx=gc.getContext('2d',{willReadFrequently:true});
+    const done=new Promise((res,rej)=>{ gif.on('finished',res); gif.on('error',rej); gif.on('progress',p=>setStatus(`GIF ${Math.round(p*100)}%`)); });
+    await captureFrames(async(i,meta)=>{
+      const fr=ctx.getImageData(0,0,canvas.width,canvas.height); const d=fr.data;
+      for(let j=0;j<d.length;j+=4){ if(useTrans&&d[j+3]<128){ d[j]=255; d[j+1]=0; d[j+2]=255; d[j+3]=255; } else { d[j+3]=255; if(useTrans&&d[j]===255&&d[j+1]===0&&d[j+2]===255) d[j+1]=1; } }
+      gcCtx.putImageData(fr,0,0); gif.addFrame(gc,{copy:true,delay:Math.max(20,Math.round(1000/meta.fps))}); setStatus(`GIF prep ${i+1}/${meta.frameCount}`);
+    },'GIF');
+    setStatus('Encoding GIF…'); gif.render(); const blob=await done; downloadBlob(blob,`brain-${Date.now()}.gif`); setStatus('GIF saved');
+  }catch(e){ console.error(e); setStatus('GIF fail: '+e.message); } finally{ if(wUrl) URL.revokeObjectURL(wUrl); setBusy(false); }
+});
+async function exportVideo(kind){
+  if(!video.videoWidth && !isImageMode){ setStatus('Choose media'); return; }
+  if(!window.MediaRecorder||!canvas.captureStream){ setStatus('Browser no MediaRecorder'); return; }
+  const cands=kind==='mp4'? ['video/mp4;codecs=avc1.42E01E','video/mp4;codecs=avc1','video/mp4']: ['video/webm;codecs=vp9','video/webm;codecs=vp8','video/webm'];
+  const mime=cands.find(t=>MediaRecorder.isTypeSupported(t)); if(!mime){ setStatus(kind+' not supported, try WebM'); return; }
+  setBusy(true); const st=exportSettings(); let stream=null, rec=null;
+  try{
+    if(!isImageMode){ video.pause(); await seekTo(0); }
+    recordingOpaque=kind==='mp4'; renderFrame(recordingOpaque);
+    stream=canvas.captureStream(st.fps); rec=new MediaRecorder(stream,{mimeType:mime,videoBitsPerSecond:5000000});
+    const chunks=[]; const fin=new Promise((res,rej)=>{ rec.addEventListener('dataavailable',e=>{ if(e.data&&e.data.size) chunks.push(e.data); }); rec.addEventListener('stop',()=>res(new Blob(chunks,{type:rec.mimeType||mime}))); rec.addEventListener('error',e=>rej(e.error||new Error('record fail'))); });
+    rec.start(200); if(!isImageMode) await video.play();
+    setStatus(`Recording ${kind.toUpperCase()} ${st.duration.toFixed(1)}s…`);
+    await new Promise(r=>setTimeout(r,st.duration*1000));
+    if(!isImageMode) video.pause(); if(rec.state!=='inactive') rec.stop();
+    const blob=await fin; downloadBlob(blob,`brain-${Date.now()}.${kind==='mp4'?'mp4':'webm'}`); setStatus(kind==='mp4'?'MP4 saved (opaque)':'WebM saved');
+  }catch(e){ setStatus('Video fail: '+e.message); } finally{
+    recordingOpaque=false; if(rec&&rec.state!=='inactive') try{rec.stop();}catch(_){}
+    if(stream) stream.getTracks().forEach(t=>t.stop()); setBusy(false); renderSafely();
+  }
+}
+$('exportWebm').addEventListener('click',()=>exportVideo('webm')); $('exportMp4').addEventListener('click',()=>exportVideo('mp4'));
+function loop(){ if(!isImageMode&&video.videoWidth&&!video.paused&&video.readyState>=2&&video.currentTime!==lastRenderedTime) renderSafely(); requestAnimationFrame(loop); }
+updateLabels(); updateIconStatus(); syncButtons(); requestAnimationFrame(loop);
+})();
+</script>
+</body>
+</html>

assests/html_sample/index2.html ADDED Viewed

	@@ -0,0 +1,1464 @@

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Brain Motion — SVG Video Studio</title>
+<style>
+  :root {
+    color-scheme: dark;
+    --bg: #0b0d12;
+    --panel: #131720;
+    --panel-2: #191f2b;
+    --line: #2b3443;
+    --text: #edf2fa;
+    --muted: #9aa6b7;
+    --accent: #8a7dff;
+    --accent-2: #5f54cf;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  button, input, select { font: inherit; }
+  .app {
+    width: min(1440px, 100%);
+    min-height: 100vh;
+    margin: auto;
+    padding: 24px;
+  }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-bottom: 22px;
+  }
+  .logo {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    flex: 0 0 auto;
+    border-radius: 14px;
+    background: linear-gradient(140deg, #a69cff, #6258d6);
+    color: white;
+    font-size: 22px;
+  }
+  h1 {
+    margin: 0;
+    font-size: clamp(21px, 3vw, 29px);
+    letter-spacing: -.035em;
+  }
+  .subtitle {
+    margin: 3px 0 0;
+    color: var(--muted);
+  }
+  .workspace {
+    display: grid;
+    grid-template-columns: 330px minmax(0, 1fr);
+    gap: 18px;
+    align-items: start;
+  }
+  .panel, .stage {
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    background: var(--panel);
+  }
+  .panel {
+    padding: 18px;
+    max-height: calc(100vh - 110px);
+    overflow: auto;
+  }
+  .section + .section {
+    margin-top: 20px;
+    padding-top: 18px;
+    border-top: 1px solid var(--line);
+  }
+  h2 {
+    margin: 0 0 12px;
+    font-size: 14px;
+    letter-spacing: .02em;
+  }
+  .small-note, .status, .icon-status {
+    color: var(--muted);
+    font-size: 12px;
+  }
+  .small-note { margin: 9px 0 0; }
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .btn {
+    min-height: 39px;
+    padding: 9px 12px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: var(--panel-2);
+    color: var(--text);
+    cursor: pointer;
+    transition: background .15s, border-color .15s, transform .15s;
+  }
+  .btn:hover:not(:disabled) {
+    border-color: #7770d8;
+    background: #24283a;
+  }
+  .btn:active:not(:disabled) { transform: translateY(1px); }
+  .btn.primary {
+    border-color: var(--accent-2);
+    background: var(--accent-2);
+    color: white;
+  }
+  .btn.primary:hover:not(:disabled) { background: #7167e2; }
+  .btn:disabled {
+    opacity: .48;
+    cursor: not-allowed;
+  }
+  .full { width: 100%; }
+  .icon-status {
+    min-height: 18px;
+    margin: 9px 0 0;
+    overflow-wrap: anywhere;
+  }
+  .control { margin: 14px 0; }
+  .control-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 6px;
+    color: #dce3ed;
+  }
+  .control-label output {
+    color: #b4aaff;
+    font-variant-numeric: tabular-nums;
+  }
+  input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+  }
+  select, input[type="number"] {
+    width: 100%;
+    min-height: 38px;
+    padding: 7px 10px;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    background: #10141c;
+    color: var(--text);
+  }
+  input[type="color"] {
+    width: 46px;
+    height: 34px;
+    padding: 2px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #10141c;
+    cursor: pointer;
+  }
+  .toggle-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 12px 0;
+  }
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #dce3ed;
+  }
+  .toggle input { accent-color: var(--accent); }
+  .color-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+  .export-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .export-grid .btn { min-height: 48px; }
+  .stage {
+    min-width: 0;
+    padding: 16px;
+  }
+  .stage-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .stage-title {
+    margin: 0;
+    font-size: 14px;
+  }
+  .stage-hint {
+    color: var(--muted);
+    font-size: 12px;
+  }
+  .preview {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: 320px;
+    overflow: hidden;
+    border: 1px solid #303846;
+    border-radius: 12px;
+    background-color: #10141b;
+    background-image:
+      linear-gradient(45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(-45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #1a202a 75%),
+      linear-gradient(-45deg, transparent 75%, #1a202a 75%);
+    background-size: 22px 22px;
+    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
+  }
+  canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 72vh;
+    object-fit: contain;
+  }
+  .placeholder {
+    position: absolute;
+    padding: 20px;
+    color: var(--muted);
+    text-align: center;
+    pointer-events: none;
+  }
+  .timeline {
+    display: grid;
+    grid-template-columns: auto minmax(100px, 1fr) auto;
+    gap: 10px;
+    align-items: center;
+    margin-top: 13px;
+  }
+  .time-label {
+    min-width: 76px;
+    color: var(--muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  .timeline input { margin: 0; }
+  .status {
+    min-height: 20px;
+    margin: 13px 0 0;
+  }
+  .hidden-input, #sourceVideo { display: none; }
+  @media (max-width: 900px) {
+    .app { padding: 14px; }
+    .workspace { grid-template-columns: 1fr; }
+    .panel { max-height: none; }
+    .preview { min-height: 220px; }
+  }
+</style>
+</head>
+<body>
+<div class="app">
+  <header class="topbar">
+    <div class="logo" aria-hidden="true">✦</div>
+    <div>
+      <h1>Brain Motion — SVG Video Studio</h1>
+      <p class="subtitle">Turn video into animated SVG-cell artwork with a transparent background.</p>
+    </div>
+  </header>
+  <div class="workspace">
+    <aside class="panel">
+      <section class="section">
+        <h2>1. Video and SVGs</h2>
+        <div class="button-row">
+          <button class="btn primary" id="uploadVideoBtn" data-lock>Choose video</button>
+          <button class="btn" id="addSvgBtn" data-lock>Add SVGs</button>
+          <button class="btn" id="clearSvgBtn" data-lock>Clear SVGs</button>
+        </div>
+        <input class="hidden-input" id="videoInput" type="file" accept="video/*">
+        <input class="hidden-input" id="svgInput" type="file" accept=".svg,image/svg+xml" multiple>
+        <video id="sourceVideo" playsinline muted></video>
+        <p class="icon-status" id="iconStatus">No SVGs loaded — circles will be used.</p>
+        <p class="small-note">Add multiple SVG files. Loaded SVGs cycle through the video cells.</p>
+      </section>
+      <section class="section">
+        <h2>2. Cell appearance</h2>
+        <div class="control">
+          <label class="control-label" for="cellSize">
+            <span>Cell spacing</span><output id="cellValue">14 px</output>
+          </label>
+          <input id="cellSize" data-lock type="range" min="6" max="40" value="14">
+        </div>
+        <div class="control">
+          <label class="control-label" for="scale">
+            <span>Cell size</span><output id="scaleValue">0.95</output>
+          </label>
+          <input id="scale" data-lock type="range" min="0.25" max="1.8" step="0.05" value="0.95">
+        </div>
+        <div class="control">
+          <label class="control-label" for="gap">
+            <span>Gap</span><output id="gapValue">1 px</output>
+          </label>
+          <input id="gap" data-lock type="range" min="0" max="12" step="0.5" value="1">
+        </div>
+        <div class="control">
+          <label class="control-label" for="contrast">
+            <span>Contrast</span><output id="contrastValue">0</output>
+          </label>
+          <input id="contrast" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="control">
+          <label class="control-label" for="sizeMode">Size follows</label>
+          <select id="sizeMode" data-lock>
+            <option value="bright">Bright pixels = larger</option>
+            <option value="dark">Dark pixels = larger</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="fallbackShape">Fallback shape</label>
+          <select id="fallbackShape" data-lock>
+            <option value="circle">Circle</option>
+            <option value="square">Square</option>
+            <option value="triangle">Triangle</option>
+            <option value="star">Star</option>
+            <option value="diamond">Diamond</option>
+            <option value="cross">Cross</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="colorMode">SVG color</label>
+          <select id="colorMode" data-lock>
+            <option value="sample">Tint to video color</option>
+            <option value="native">Keep original SVG colors</option>
+            <option value="white">Tint white</option>
+          </select>
+        </div>
+        <div class="toggle-row">
+          <label class="toggle"><input id="rotate" data-lock type="checkbox"> Rotate by brightness</label>
+        </div>
+      </section>
+      <section class="section">
+        <h2>3. Background and export</h2>
+        <div class="toggle-row">
+          <label class="toggle"><input id="transparent" data-lock type="checkbox" checked> Transparent background</label>
+        </div>
+        <div class="color-row">
+          <label for="bgColor">Background color for opaque exports</label>
+          <input id="bgColor" data-lock type="color" value="#10141b">
+        </div>
+        <div class="control">
+          <label class="control-label" for="backgroundMode">Cut out pixels</label>
+          <select id="backgroundMode" data-lock>
+            <option value="dark">Dark pixels</option>
+            <option value="light">Light pixels</option>
+            <option value="none">Do not cut out</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="cutoff">
+            <span>Cutout threshold</span><output id="cutoffValue">5%</output>
+          </label>
+          <input id="cutoff" data-lock type="range" min="0" max="95" value="5">
+        </div>
+        <div class="control">
+          <label class="control-label" for="outputWidth">Output width</label>
+          <input id="outputWidth" data-lock type="number" min="240" max="1280" step="80" value="480">
+        </div>
+        <div class="control">
+          <label class="control-label" for="duration">Export duration (seconds)</label>
+          <input id="duration" data-lock type="number" min="0.5" max="15" step="0.5" value="4">
+        </div>
+        <div class="control">
+          <label class="control-label" for="fps">Export FPS</label>
+          <input id="fps" data-lock type="number" min="4" max="20" step="1" value="12">
+        </div>
+        <div class="button-row" style="margin: 14px 0 9px">
+          <button class="btn" id="playPause" disabled data-lock>Play</button>
+          <button class="btn" id="saveFrame" data-lock>Save current PNG</button>
+        </div>
+        <div class="export-grid">
+          <button class="btn primary" id="exportSvg" disabled data-lock>Animated SVG</button>
+          <button class="btn" id="exportGif" disabled data-lock>GIF</button>
+          <button class="btn" id="exportWebm" disabled data-lock>WebM</button>
+          <button class="btn" id="exportMp4" disabled data-lock>MP4 (opaque)</button>
+        </div>
+        <p class="small-note">
+          GIF transparency is limited. MP4 is always opaque. WebM alpha depends on browser support.
+          Video exports contain no audio.
+        </p>
+      </section>
+    </aside>
+    <section class="stage">
+      <div class="stage-head">
+        <h2 class="stage-title">Preview</h2>
+        <span class="stage-hint">The checkerboard indicates transparent pixels.</span>
+      </div>
+      <div class="preview">
+        <canvas id="canvas" width="480" height="270"></canvas>
+        <div class="placeholder" id="placeholder">Choose a video to start.<br>Add one or more SVG files to use them as animated cells.</div>
+      </div>
+      <div class="timeline">
+        <button class="btn" id="timelinePlay" disabled data-lock>Play</button>
+        <input id="seek" type="range" min="0" max="1000" value="0" disabled data-lock>
+        <span class="time-label" id="timeLabel">0:00 / 0:00</span>
+      </div>
+      <p class="status" id="status" aria-live="polite">Ready. Choose a video to begin.</p>
+    </section>
+  </div>
+</div>
+<!-- GIF encoding dependency. Other exports do not require this library. -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
+<script>
+(() => {
+  'use strict';
+  const $ = id => document.getElementById(id);
+  const video = $('sourceVideo');
+  const canvas = $('canvas');
+  const ctx = canvas.getContext('2d', { alpha: true });
+  const sampleCanvas = document.createElement('canvas');
+  const sampleCtx = sampleCanvas.getContext('2d', { willReadFrequently: true });
+  const tintCanvas = document.createElement('canvas');
+  tintCanvas.width = 32;
+  tintCanvas.height = 32;
+  const tintCtx = tintCanvas.getContext('2d');
+  let videoUrl = null;
+  let svgAssets = [];
+  let busy = false;
+  let recordingOpaque = false;
+  let lastRenderedTime = -1;
+  const exportButtons = [
+    $('exportSvg'), $('exportGif'), $('exportWebm'), $('exportMp4')
+  ];
+  function setStatus(message) {
+    $('status').textContent = message;
+  }
+  function syncActionButtons() {
+    const hasVideo = !!video.videoWidth;
+    $('playPause').disabled = busy || !hasVideo;
+    $('timelinePlay').disabled = busy || !hasVideo;
+    $('seek').disabled = busy || !hasVideo;
+    for (const button of exportButtons) {
+      button.disabled = busy || !hasVideo;
+    }
+  }
+  function setBusy(value) {
+    busy = value;
+    document.querySelectorAll('[data-lock]').forEach(el => {
+      el.disabled = value;
+    });
+    syncActionButtons();
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+  function updateLabels() {
+    $('cellValue').textContent = `${$('cellSize').value} px`;
+    $('scaleValue').textContent = Number($('scale').value).toFixed(2);
+    $('gapValue').textContent = `${$('gap').value} px`;
+    const contrast = Number($('contrast').value);
+    $('contrastValue').textContent = `${contrast > 0 ? '+' : ''}${contrast}`;
+    $('cutoffValue').textContent = `${$('cutoff').value}%`;
+  }
+  function resizeCanvasForVideo() {
+    if (!video.videoWidth || !video.videoHeight) return;
+    const wantedWidth = clamp(Number($('outputWidth').value) || 480, 240, 1280);
+    const maxHeight = 1280;
+    const ratio = Math.min(
+      wantedWidth / video.videoWidth,
+      maxHeight / video.videoHeight
+    );
+    const width = Math.max(1, Math.round(video.videoWidth * ratio));
+    const height = Math.max(1, Math.round(video.videoHeight * ratio));
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      sampleCanvas.width = width;
+      sampleCanvas.height = height;
+    }
+  }
+  function adjustChannel(value, factor) {
+    return clamp(factor * (value - 128) + 128, 0, 255);
+  }
+  function drawAssetCentered(targetCtx, asset, boxSize) {
+    const iw = asset.width || asset.image.naturalWidth || 100;
+    const ih = asset.height || asset.image.naturalHeight || 100;
+    const scale = Math.min(boxSize / iw, boxSize / ih);
+    targetCtx.drawImage(
+      asset.image,
+      -iw * scale / 2,
+      -ih * scale / 2,
+      iw * scale,
+      ih * scale
+    );
+  }
+  function drawBuiltin(targetCtx, type, size, color) {
+    const r = size / 2;
+    targetCtx.fillStyle = color;
+    targetCtx.beginPath();
+    switch (type) {
+      case 'square':
+        targetCtx.rect(-r, -r, size, size);
+        break;
+      case 'triangle':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, r);
+        targetCtx.lineTo(-r, r);
+        targetCtx.closePath();
+        break;
+      case 'star':
+        for (let i = 0; i < 10; i++) {
+          const angle = -Math.PI / 2 + i * Math.PI / 5;
+          const radius = i % 2 === 0 ? r : r * 0.43;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+          if (i === 0) targetCtx.moveTo(x, y);
+          else targetCtx.lineTo(x, y);
+        }
+        targetCtx.closePath();
+        break;
+      case 'diamond':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, 0);
+        targetCtx.lineTo(0, r);
+        targetCtx.lineTo(-r, 0);
+        targetCtx.closePath();
+        break;
+      case 'cross':
+        targetCtx.rect(-r * 0.28, -r, r * 0.56, size);
+        targetCtx.rect(-r, -r * 0.28, size, r * 0.56);
+        break;
+      default:
+        targetCtx.arc(0, 0, r, 0, Math.PI * 2);
+        break;
+    }
+    targetCtx.fill();
+  }
+  function drawTintedAsset(asset, color, size) {
+    tintCtx.clearRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.save();
+    tintCtx.translate(tintCanvas.width / 2, tintCanvas.height / 2);
+    drawAssetCentered(tintCtx, asset, tintCanvas.width - 2);
+    tintCtx.restore();
+    tintCtx.globalCompositeOperation = 'source-in';
+    tintCtx.fillStyle = color;
+    tintCtx.fillRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.globalCompositeOperation = 'source-over';
+    ctx.drawImage(
+      tintCanvas,
+      -size / 2,
+      -size / 2,
+      size,
+      size
+    );
+  }
+  function renderFrame(forceOpaque = false) {
+    if (!video.videoWidth || video.readyState < 2) return;
+    resizeCanvasForVideo();
+    const width = canvas.width;
+    const height = canvas.height;
+    sampleCtx.drawImage(video, 0, 0, width, height);
+    const pixels = sampleCtx.getImageData(0, 0, width, height).data;
+    ctx.clearRect(0, 0, width, height);
+    const isTransparent = $('transparent').checked && !forceOpaque;
+    if (!isTransparent) {
+      ctx.fillStyle = $('bgColor').value;
+      ctx.fillRect(0, 0, width, height);
+    }
+    const cell = Number($('cellSize').value);
+    const scaleSetting = Number($('scale').value);
+    const gap = Number($('gap').value);
+    const cutoff = Number($('cutoff').value) / 100;
+    const contrast = Number($('contrast').value);
+    const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+    const columns = Math.ceil(width / cell);
+    const rows = Math.ceil(height / cell);
+    const sizeMode = $('sizeMode').value;
+    const backgroundMode = $('backgroundMode').value;
+    const colorMode = $('colorMode').value;
+    const rotate = $('rotate').checked;
+    const fallbackShape = $('fallbackShape').value;
+    for (let row = 0; row < rows; row++) {
+      const y = row * cell;
+      for (let column = 0; column < columns; column++) {
+        const x = column * cell;
+        const sampleX = Math.min(width - 1, Math.floor(x + cell / 2));
+        const sampleY = Math.min(height - 1, Math.floor(y + cell / 2));
+        const index = (sampleY * width + sampleX) * 4;
+        const alpha = pixels[index + 3] / 255;
+        if (alpha < 0.04) continue;
+        const red = adjustChannel(pixels[index], contrastFactor);
+        const green = adjustChannel(pixels[index + 1], contrastFactor);
+        const blue = adjustChannel(pixels[index + 2], contrastFactor);
+        const luma = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+        if (backgroundMode === 'dark' && luma < cutoff) continue;
+        if (backgroundMode === 'light' && luma > 1 - cutoff) continue;
+        const brightness = sizeMode === 'dark' ? 1 - luma : luma;
+        const size = Math.min(
+          cell * 1.8,
+          Math.max(0, cell * scaleSetting * (0.12 + 0.88 * brightness) - gap)
+        );
+        if (size < 1) continue;
+        const color = colorMode === 'white'
+          ? '#ffffff'
+          : `rgb(${Math.round(red)},${Math.round(green)},${Math.round(blue)})`;
+        const asset = svgAssets.length
+          ? svgAssets[(row * columns + column) % svgAssets.length]
+          : null;
+        ctx.save();
+        ctx.translate(x + cell / 2, y + cell / 2);
+        ctx.globalAlpha = alpha;
+        if (rotate) {
+          ctx.rotate((luma - 0.5) * Math.PI);
+        }
+        if (asset) {
+          if (colorMode === 'native') {
+            drawAssetCentered(ctx, asset, size);
+          } else {
+            drawTintedAsset(asset, color, size);
+          }
+        } else {
+          drawBuiltin(ctx, fallbackShape, size, color);
+        }
+        ctx.restore();
+      }
+    }
+    lastRenderedTime = video.currentTime;
+    $('placeholder').style.display = 'none';
+  }
+  function renderSafely() {
+    try {
+      renderFrame(recordingOpaque);
+    } catch (error) {
+      console.error(error);
+      setStatus(`Preview error: ${error.message}`);
+    }
+  }
+  function sanitizeSvg(source) {
+    const doc = new DOMParser().parseFromString(source, 'image/svg+xml');
+    if (doc.querySelector('parsererror')) {
+      throw new Error('The selected file is not valid SVG.');
+    }
+    const root = doc.documentElement;
+    if (!root || root.localName.toLowerCase() !== 'svg') {
+      throw new Error('No <svg> element was found in that file.');
+    }
+    const blocked = new Set(['script', 'foreignobject', 'iframe', 'object', 'embed']);
+    for (const element of [...root.querySelectorAll('*')]) {
+      if (blocked.has(element.localName.toLowerCase())) {
+        element.remove();
+        continue;
+      }
+      for (const attribute of [...element.attributes]) {
+        const name = attribute.name.toLowerCase();
+        const value = attribute.value.trim();
+        if (name.startsWith('on')) {
+          element.removeAttributeNode(attribute);
+          continue;
+        }
+        if ((name === 'href' || name === 'xlink:href' || name === 'src') &&
+            value &&
+            !value.startsWith('#') &&
+            !/^data:image\//i.test(value)) {
+          element.removeAttributeNode(attribute);
+          continue;
+        }
+        if (/url\(\s*(['"]?)(?:https?:|\/\/|file:|javascript:)/i.test(value)) {
+          element.removeAttributeNode(attribute);
+        }
+      }
+    }
+    for (const style of [...root.querySelectorAll('style')]) {
+      if (/@import|url\(\s*(['"]?)(?:https?:|\/\/|file:)/i.test(style.textContent)) {
+        style.remove();
+      }
+    }
+    if (!root.hasAttribute('xmlns')) {
+      root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+    const viewBoxText = root.getAttribute('viewBox') || '';
+    const values = viewBoxText.trim().split(/[\s,]+/).map(Number);
+    let viewX = 0;
+    let viewY = 0;
+    let viewWidth = 100;
+    let viewHeight = 100;
+    if (values.length === 4 && values.every(Number.isFinite) && values[2] > 0 && values[3] > 0) {
+      [viewX, viewY, viewWidth, viewHeight] = values;
+    } else {
+      viewWidth = parseFloat(root.getAttribute('width')) || 100;
+      viewHeight = parseFloat(root.getAttribute('height')) || 100;
+      root.setAttribute('viewBox', `0 0 ${viewWidth} ${viewHeight}`);
+    }
+    root.setAttribute('width', String(viewWidth));
+    root.setAttribute('height', String(viewHeight));
+    return {
+      text: new XMLSerializer().serializeToString(root),
+      width: viewWidth,
+      height: viewHeight
+    };
+  }
+  function loadSvgImage(file, parsed) {
+    const blob = new Blob([parsed.text], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve({
+        name: file.name,
+        image,
+        url,
+        width: parsed.width,
+        height: parsed.height
+      });
+      image.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error(`Could not load ${file.name}.`));
+      };
+      image.src = url;
+    });
+  }
+  function updateIconStatus() {
+    if (!svgAssets.length) {
+      $('iconStatus').textContent = 'No SVGs loaded — circles will be used.';
+      return;
+    }
+    $('iconStatus').textContent =
+      `${svgAssets.length} SVG${svgAssets.length === 1 ? '' : 's'} loaded: ` +
+      svgAssets.map(asset => asset.name).join(', ');
+  }
+  function clearSvgAssets() {
+    for (const asset of svgAssets) URL.revokeObjectURL(asset.url);
+    svgAssets = [];
+    updateIconStatus();
+    renderSafely();
+  }
+  function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+    const minutes = Math.floor(seconds / 60);
+    const wholeSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${String(wholeSeconds).padStart(2, '0')}`;
+  }
+  function updateTimeline() {
+    if (!video.videoWidth || !Number.isFinite(video.duration) || video.duration <= 0) {
+      $('timeLabel').textContent = '0:00 / 0:00';
+      return;
+    }
+    $('seek').value = String(Math.round(video.currentTime / video.duration * 1000));
+    $('timeLabel').textContent =
+      `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
+  }
+  function seekTo(seconds) {
+    return new Promise((resolve, reject) => {
+      const duration = video.duration;
+      const maximum = Number.isFinite(duration) && duration > 0
+        ? Math.max(0, duration - 0.01)
+        : Math.max(0, seconds);
+      const target = clamp(seconds, 0, maximum);
+      if (!video.seeking && Math.abs(video.currentTime - target) < 0.001) {
+        resolve();
+        return;
+      }
+      let timer;
+      const finish = () => {
+        clearTimeout(timer);
+        video.removeEventListener('seeked', finish);
+        resolve();
+      };
+      video.addEventListener('seeked', finish);
+      timer = setTimeout(finish, 8000);
+      try {
+        video.currentTime = target;
+      } catch (error) {
+        clearTimeout(timer);
+        video.removeEventListener('seeked', finish);
+        reject(error);
+      }
+    });
+  }
+  function exportSettings() {
+    const fps = clamp(Math.round(Number($('fps').value) || 12), 4, 20);
+    const seconds = clamp(Number($('duration').value) || 4, 0.5, 15);
+    const frameCount = Math.max(1, Math.ceil(seconds * fps));
+    return {
+      fps,
+      frameCount,
+      duration: frameCount / fps
+    };
+  }
+  async function captureFrames(onFrame, label) {
+    if (!video.videoWidth) throw new Error('Choose a video first.');
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    const mediaDuration = Number.isFinite(video.duration) && video.duration > 0
+      ? video.duration
+      : null;
+    video.pause();
+    try {
+      for (let i = 0; i < settings.frameCount; i++) {
+        const time = mediaDuration
+          ? (i / settings.fps) % mediaDuration
+          : i / settings.fps;
+        await seekTo(time);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        renderFrame(false);
+        await onFrame(i, {
+          ...settings,
+          width: canvas.width,
+          height: canvas.height
+        });
+        setStatus(`${label}: rendering frame ${i + 1} of ${settings.frameCount}…`);
+      }
+      return {
+        ...settings,
+        width: canvas.width,
+        height: canvas.height
+      };
+    } finally {
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) {
+        await video.play().catch(() => {});
+      }
+      renderSafely();
+      updateTimeline();
+    }
+  }
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 60000);
+  }
+  function numberText(value) {
+    return Number(value.toFixed(6)).toString();
+  }
+  function makeAnimatedSvg(frames, width, height, fps) {
+    const count = frames.length;
+    const duration = count / fps;
+    const durationText = numberText(duration);
+    const imageElements = frames.map((data, index) => {
+      let animation = '';
+      if (count > 1) {
+        let values;
+        let keyTimes;
+        if (index === 0) {
+          values = 'visible;hidden;hidden';
+          keyTimes = `0;${numberText(1 / count)};1`;
+        } else if (index === count - 1) {
+          values = `hidden;visible;hidden`;
+          keyTimes = `0;${numberText(index / count)};1`;
+        } else {
+          values = 'hidden;visible;hidden;hidden';
+          keyTimes =
+            `0;${numberText(index / count)};${numberText((index + 1) / count)};1`;
+        }
+        animation =
+          `<animate attributeName="visibility" calcMode="discrete" ` +
+          `values="${values}" keyTimes="${keyTimes}" ` +
+          `dur="${durationText}s" repeatCount="indefinite"/>`;
+      }
+      const initialVisibility = index === 0 ? 'visible' : 'hidden';
+      return `<image x="0" y="0" width="${width}" height="${height}" ` +
+        `visibility="${initialVisibility}" href="${data}" xlink:href="${data}">` +
+        `${animation}</image>`;
+    }).join('\n');
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+${imageElements}
+</svg>`;
+  }
+  $('uploadVideoBtn').addEventListener('click', () => $('videoInput').click());
+  $('addSvgBtn').addEventListener('click', () => $('svgInput').click());
+  $('videoInput').addEventListener('change', event => {
+    const file = event.target.files && event.target.files[0];
+    if (!file) return;
+    video.pause();
+    if (videoUrl) URL.revokeObjectURL(videoUrl);
+    videoUrl = URL.createObjectURL(file);
+    video.src = videoUrl;
+    video.loop = true;
+    video.muted = true;
+    video.load();
+    $('placeholder').style.display = 'block';
+    setStatus(`Loading ${file.name}…`);
+    event.target.value = '';
+  });
+  video.addEventListener('loadedmetadata', () => {
+    resizeCanvasForVideo();
+    $('seek').disabled = false;
+    $('timelinePlay').disabled = false;
+    $('playPause').disabled = false;
+    $('placeholder').style.display = 'none';
+    updateTimeline();
+    renderSafely();
+    syncActionButtons();
+    setStatus(`Video loaded: ${video.videoWidth} × ${video.videoHeight}.`);
+    video.play().catch(() => {
+      setStatus('Video loaded. Press Play to start the preview.');
+    });
+  });
+  video.addEventListener('loadeddata', () => renderSafely());
+  video.addEventListener('seeked', () => {
+    renderSafely();
+    updateTimeline();
+  });
+  video.addEventListener('timeupdate', updateTimeline);
+  video.addEventListener('play', () => {
+    $('playPause').textContent = 'Pause';
+    $('timelinePlay').textContent = 'Pause';
+  });
+  video.addEventListener('pause', () => {
+    $('playPause').textContent = 'Play';
+    $('timelinePlay').textContent = 'Play';
+    renderSafely();
+  });
+  video.addEventListener('error', () => {
+    setStatus('Could not read that video. Try an MP4 or WebM file supported by your browser.');
+  });
+  $('svgInput').addEventListener('change', async event => {
+    const files = [...(event.target.files || [])];
+    event.target.value = '';
+    if (!files.length) return;
+    let added = 0;
+    for (const file of files) {
+      if (!file.name.toLowerCase().endsWith('.svg') && file.type !== 'image/svg+xml') {
+        continue;
+      }
+      try {
+        const parsed = sanitizeSvg(await file.text());
+        const asset = await loadSvgImage(file, parsed);
+        svgAssets.push(asset);
+        added++;
+      } catch (error) {
+        console.warn(error);
+        setStatus(error.message);
+      }
+    }
+    updateIconStatus();
+    renderSafely();
+    if (added) {
+      setStatus(`Added ${added} SVG${added === 1 ? '' : 's'}. All loaded SVGs cycle across the cells.`);
+    }
+  });
+  $('clearSvgBtn').addEventListener('click', clearSvgAssets);
+  function togglePlayback() {
+    if (!video.videoWidth) return;
+    if (video.paused) {
+      video.play().catch(() => setStatus('The video could not be played.'));
+    } else {
+      video.pause();
+    }
+  }
+  $('playPause').addEventListener('click', togglePlayback);
+  $('timelinePlay').addEventListener('click', togglePlayback);
+  $('seek').addEventListener('input', event => {
+    if (!video.videoWidth || !Number.isFinite(video.duration)) return;
+    video.pause();
+    const fraction = Number(event.target.value) / 1000;
+    video.currentTime = fraction * video.duration;
+  });
+  const renderControlIds = [
+    'cellSize', 'scale', 'gap', 'contrast', 'sizeMode',
+    'backgroundMode', 'cutoff', 'fallbackShape', 'colorMode',
+    'rotate', 'transparent', 'bgColor', 'outputWidth'
+  ];
+  for (const id of renderControlIds) {
+    $(id).addEventListener('input', () => {
+      updateLabels();
+      renderSafely();
+    });
+    $(id).addEventListener('change', () => {
+      updateLabels();
+      renderSafely();
+    });
+  }
+  $('saveFrame').addEventListener('click', async () => {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+    if (!blob) {
+      setStatus('Could not create the PNG.');
+      return;
+    }
+    downloadBlob(blob, `brain-motion-${Date.now()}.png`);
+    setStatus('Saved the current frame as a transparent PNG.');
+  });
+  $('exportSvg').addEventListener('click', async () => {
+    setBusy(true);
+    setStatus('Preparing animated SVG frames…');
+    try {
+      const frames = [];
+      const meta = await captureFrames(async () => {
+        frames.push(canvas.toDataURL('image/png'));
+      }, 'SVG');
+      const svg = makeAnimatedSvg(frames, meta.width, meta.height, meta.fps);
+      downloadBlob(
+        new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }),
+        `brain-motion-${Date.now()}.svg`
+      );
+      setStatus('Saved animated SVG. It embeds transparent PNG frames inside an SVG animation.');
+    } catch (error) {
+      setStatus(`SVG export failed: ${error.message}`);
+    } finally {
+      setBusy(false);
+    }
+  });
+  async function fetchGifWorker() {
+    const url = 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js';
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error('Could not download the GIF encoder worker. Run this page from localhost and check your internet connection.');
+    }
+    const workerSource = await response.text();
+    return URL.createObjectURL(
+      new Blob([workerSource], { type: 'application/javascript' })
+    );
+  }
+  $('exportGif').addEventListener('click', async () => {
+    if (!window.GIF) {
+      setStatus('GIF encoder did not load. Check your internet connection and reload the page.');
+      return;
+    }
+    setBusy(true);
+    let workerUrl = null;
+    try {
+      setStatus('Loading GIF encoder…');
+      workerUrl = await fetchGifWorker();
+      const options = {
+        workers: 2,
+        quality: 10,
+        repeat: 0,
+        width: canvas.width,
+        height: canvas.height,
+        workerScript: workerUrl
+      };
+      const usesTransparency = $('transparent').checked;
+      const transparentKey = 0xff00ff;
+      if (usesTransparency) options.transparent = transparentKey;
+      const gif = new window.GIF(options);
+      const gifCanvas = document.createElement('canvas');
+      gifCanvas.width = canvas.width;
+      gifCanvas.height = canvas.height;
+      const gifCtx = gifCanvas.getContext('2d', { willReadFrequently: true });
+      const finished = new Promise((resolve, reject) => {
+        gif.on('finished', resolve);
+        gif.on('error', reject);
+        gif.on('progress', progress => {
+          setStatus(`Encoding GIF: ${Math.round(progress * 100)}%…`);
+        });
+      });
+      await captureFrames(async (index, meta) => {
+        const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = frame.data;
+        for (let i = 0; i < data.length; i += 4) {
+          if (usesTransparency && data[i + 3] < 128) {
+            data[i] = 255;
+            data[i + 1] = 0;
+            data[i + 2] = 255;
+            data[i + 3] = 255;
+          } else {
+            data[i + 3] = 255;
+            // Keep actual magenta artwork from matching the transparent key.
+            if (usesTransparency && data[i] === 255 && data[i + 1] === 0 && data[i + 2] === 255) {
+              data[i + 1] = 1;
+            }
+          }
+        }
+        gifCtx.putImageData(frame, 0, 0);
+        gif.addFrame(gifCanvas, {
+          copy: true,
+          delay: Math.max(20, Math.round(1000 / meta.fps))
+        });
+        setStatus(`GIF: preparing frame ${index + 1} of ${meta.frameCount}…`);
+      }, 'GIF');
+      setStatus('Encoding GIF…');
+      gif.render();
+      const blob = await finished;
+      downloadBlob(blob, `brain-motion-${Date.now()}.gif`);
+      setStatus('Saved GIF. GIF transparency is limited to transparent/opaque pixels.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`GIF export failed: ${error.message || 'Check that the page is served from localhost.'}`);
+    } finally {
+      if (workerUrl) URL.revokeObjectURL(workerUrl);
+      setBusy(false);
+    }
+  });
+  async function exportRecordedVideo(kind) {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    if (!window.MediaRecorder || !canvas.captureStream) {
+      setStatus('This browser does not support canvas video recording. Try a current version of Chrome or Edge.');
+      return;
+    }
+    const mimeCandidates = kind === 'mp4'
+      ? ['video/mp4;codecs=avc1.42E01E', 'video/mp4;codecs=avc1', 'video/mp4']
+      : ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'];
+    const mimeType = mimeCandidates.find(type => MediaRecorder.isTypeSupported(type));
+    if (!mimeType) {
+      setStatus(kind === 'mp4'
+        ? 'MP4 recording is not supported by this browser. MP4 support is browser-dependent; use WebM instead.'
+        : 'WebM recording is not supported by this browser.');
+      return;
+    }
+    setBusy(true);
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    let stream = null;
+    let recorder = null;
+    try {
+      video.pause();
+      await seekTo(0);
+      recordingOpaque = kind === 'mp4';
+      renderFrame(recordingOpaque);
+      stream = canvas.captureStream(settings.fps);
+      recorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: 5_000_000
+      });
+      const chunks = [];
+      const recordingFinished = new Promise((resolve, reject) => {
+        recorder.addEventListener('dataavailable', event => {
+          if (event.data && event.data.size) chunks.push(event.data);
+        });
+        recorder.addEventListener('stop', () => {
+          resolve(new Blob(chunks, { type: recorder.mimeType || mimeType }));
+        });
+        recorder.addEventListener('error', event => {
+          reject(event.error || new Error('Video recording failed.'));
+        });
+      });
+      recorder.start(200);
+      await video.play();
+      setStatus(`Recording ${kind.toUpperCase()} for ${settings.duration.toFixed(1)} seconds…`);
+      await new Promise(resolve => setTimeout(resolve, settings.duration * 1000));
+      video.pause();
+      if (recorder.state !== 'inactive') recorder.stop();
+      const blob = await recordingFinished;
+      const extension = kind === 'mp4' ? 'mp4' : 'webm';
+      downloadBlob(blob, `brain-motion-${Date.now()}.${extension}`);
+      setStatus(kind === 'mp4'
+        ? 'Saved MP4 with an opaque background. MP4 does not support transparency.'
+        : 'Saved WebM. Transparent alpha depends on browser and codec support.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`Video export failed: ${error.message}`);
+    } finally {
+      recordingOpaque = false;
+      if (recorder && recorder.state !== 'inactive') {
+        try { recorder.stop(); } catch (_) {}
+      }
+      if (stream) stream.getTracks().forEach(track => track.stop());
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) await video.play().catch(() => {});
+      renderSafely();
+      setBusy(false);
+    }
+  }
+  $('exportWebm').addEventListener('click', () => exportRecordedVideo('webm'));
+  $('exportMp4').addEventListener('click', () => exportRecordedVideo('mp4'));
+  function previewLoop() {
+    if (video.videoWidth &&
+        !video.paused &&
+        video.readyState >= 2 &&
+        video.currentTime !== lastRenderedTime) {
+      renderSafely();
+    }
+    requestAnimationFrame(previewLoop);
+  }
+  updateLabels();
+  updateIconStatus();
+  syncActionButtons();
+  requestAnimationFrame(previewLoop);
+})();
+</script>
+</body>
+</html>

assests/html_sample/index3.html ADDED Viewed

	@@ -0,0 +1,1587 @@

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Brain Motion — SVG Video Studio</title>
+<style>
+  :root {
+    color-scheme: dark;
+    --bg: #0b0d12;
+    --panel: #14171f;
+    --panel-2: #1a1e28;
+    --line: #272c3a;
+    --text: #edf2fa;
+    --muted: #8d97a8;
+    --accent: #8a7dff;
+    --accent-2: #6258cf;
+    --radius: 14px;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    min-height: 100vh;
+    background: radial-gradient(circle at top left, #151929, var(--bg) 60%);
+    color: var(--text);
+    font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  button, input, select { font: inherit; }
+  .app {
+    width: min(1480px, 100%);
+    min-height: 100vh;
+    margin: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .logo {
+    display: grid;
+    place-items: center;
+    width: 46px;
+    height: 46px;
+    flex: 0 0 auto;
+    border-radius: 14px;
+    background: linear-gradient(140deg, #a69cff, #5f54cf);
+    color: white;
+    font-size: 24px;
+    box-shadow: 0 4px 12px rgba(98, 88, 207, 0.3);
+  }
+  h1 {
+    margin: 0;
+    font-size: clamp(20px, 3vw, 26px);
+    font-weight: 600;
+    letter-spacing: -.03em;
+  }
+  .subtitle {
+    margin: 2px 0 0;
+    color: var(--muted);
+    font-size: 13px;
+  }
+  .workspace {
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+    gap: 20px;
+    align-items: start;
+    flex: 1;
+  }
+  .panel, .stage {
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    background: var(--panel);
+  }
+  .panel {
+    padding: 16px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--line) transparent;
+  }
+  .panel::-webkit-scrollbar { width: 6px; }
+  .panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
+  .section + .section {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--line);
+  }
+  h2 {
+    margin: 0 0 12px;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: .03em;
+    text-transform: uppercase;
+    color: #bcc5d6;
+  }
+  .small-note, .status, .icon-status {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .small-note { margin: 8px 0 0; line-height: 1.4; }
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .btn {
+    min-height: 36px;
+    padding: 8px 14px;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    background: var(--panel-2);
+    color: var(--text);
+    cursor: pointer;
+    transition: all .15s ease;
+    font-weight: 500;
+  }
+  .btn:hover:not(:disabled) {
+    border-color: #7770d8;
+    background: #24283a;
+  }
+  .btn:active:not(:disabled) { transform: scale(0.97); }
+  .btn.primary {
+    border-color: var(--accent-2);
+    background: var(--accent-2);
+    color: white;
+  }
+  .btn.primary:hover:not(:disabled) { background: #7167e2; }
+  .btn:disabled {
+    opacity: .4;
+    cursor: not-allowed;
+  }
+  .full { width: 100%; }
+  .icon-status {
+    min-height: 16px;
+    margin: 8px 0 0;
+    overflow-wrap: anywhere;
+  }
+  .control { margin: 12px 0; }
+  .control-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 5px;
+    color: #dce3ed;
+    font-size: 12px;
+  }
+  .control-label output {
+    color: #b4aaff;
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+  }
+  input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+    height: 6px;
+  }
+  select, input[type="number"] {
+    width: 100%;
+    min-height: 34px;
+    padding: 6px 10px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #10141c;
+    color: var(--text);
+  }
+  input[type="color"] {
+    width: 40px;
+    height: 30px;
+    padding: 2px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: #10141c;
+    cursor: pointer;
+  }
+  .toggle-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 10px 0;
+  }
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: #dce3ed;
+    font-size: 12px;
+  }
+  .toggle input { accent-color: var(--accent); }
+  .color-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 12px;
+  }
+  .export-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .export-grid .btn { min-height: 42px; font-size: 12px; }
+  .stage {
+    min-width: 0;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+  .stage-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .stage-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .stage-hint {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .preview {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: 400px;
+    overflow: hidden;
+    border: 1px solid #303846;
+    border-radius: 12px;
+    background-color: #10141b;
+    background-image:
+      linear-gradient(45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(-45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #1a202a 75%),
+      linear-gradient(-45deg, transparent 75%, #1a202a 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+    flex: 1;
+  }
+  canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 70vh;
+    object-fit: contain;
+  }
+  .placeholder {
+    position: absolute;
+    padding: 30px;
+    color: var(--muted);
+    text-align: center;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  .placeholder-icon {
+    font-size: 42px;
+    opacity: 0.4;
+    color: var(--accent);
+  }
+  .timeline {
+    display: grid;
+    grid-template-columns: auto minmax(100px, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    margin-top: 14px;
+  }
+  .time-label {
+    min-width: 80px;
+    color: var(--muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+  .timeline input { margin: 0; }
+  .status {
+    min-height: 18px;
+    margin: 12px 0 0;
+    font-size: 11px;
+  }
+  .hidden-input, #sourceVideo { display: none; }
+  @media (max-width: 900px) {
+    .app { padding: 12px; }
+    .workspace { grid-template-columns: 1fr; }
+    .panel { max-height: none; }
+    .preview { min-height: 280px; }
+  }
+</style>
+</head>
+<body>
+<div class="app">
+  <header class="topbar">
+    <div class="logo" aria-hidden="true">✦</div>
+    <div>
+      <h1>Brain Motion Studio</h1>
+      <p class="subtitle">Transform video into dynamic SVG-cell artwork with transparency & color grading.</p>
+    </div>
+  </header>
+  <div class="workspace">
+    <aside class="panel">
+      <section class="section">
+        <h2>1. Source Media</h2>
+        <div class="button-row">
+          <button class="btn primary" id="uploadVideoBtn" data-lock>Video</button>
+          <button class="btn" id="addSvgBtn" data-lock>Add SVGs</button>
+          <button class="btn" id="clearSvgBtn" data-lock>Clear SVGs</button>
+        </div>
+        <input class="hidden-input" id="videoInput" type="file" accept="video/*">
+        <input class="hidden-input" id="svgInput" type="file" accept=".svg,image/svg+xml" multiple>
+        <video id="sourceVideo" playsinline muted></video>
+        <p class="icon-status" id="iconStatus">No SVGs loaded — circles will be used.</p>
+        <p class="small-note">Upload a video, then add any number of SVG files. They will automatically cycle through the cells.</p>
+      </section>
+      <section class="section">
+        <h2>2. Color Grading</h2>
+        <div class="control">
+          <label class="control-label" for="brightness">
+            <span>Brightness</span><output id="brightnessValue">0</output>
+          </label>
+          <input id="brightness" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="control">
+          <label class="control-label" for="saturation">
+            <span>Saturation</span><output id="saturationValue">0</output>
+          </label>
+          <input id="saturation" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="color-row" style="margin: 12px 0">
+          <label for="tintColor">Tint / Overlay</label>
+          <input id="tintColor" data-lock type="color" value="#8a7dff">
+        </div>
+        <div class="control">
+          <label class="control-label" for="tintOpacity">
+            <span>Tint Intensity</span><output id="tintOpacityValue">0%</output>
+          </label>
+          <input id="tintOpacity" data-lock type="range" min="0" max="100" value="0">
+        </div>
+      </section>
+      <section class="section">
+        <h2>3. Cell Appearance</h2>
+        <div class="control">
+          <label class="control-label" for="cellSize">
+            <span>Spacing</span><output id="cellValue">14 px</output>
+          </label>
+          <input id="cellSize" data-lock type="range" min="6" max="40" value="14">
+        </div>
+        <div class="control">
+          <label class="control-label" for="scale">
+            <span>Scale</span><output id="scaleValue">0.95</output>
+          </label>
+          <input id="scale" data-lock type="range" min="0.25" max="1.8" step="0.05" value="0.95">
+        </div>
+        <div class="control">
+          <label class="control-label" for="gap">
+            <span>Gap</span><output id="gapValue">1 px</output>
+          </label>
+          <input id="gap" data-lock type="range" min="0" max="12" step="0.5" value="1">
+        </div>
+        <div class="control">
+          <label class="control-label" for="contrast">
+            <span>Contrast</span><output id="contrastValue">0</output>
+          </label>
+          <input id="contrast" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="control">
+          <label class="control-label" for="sizeMode">Size Logic</label>
+          <select id="sizeMode" data-lock>
+            <option value="bright">Bright = Larger</option>
+            <option value="dark">Dark = Larger</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="fallbackShape">Fallback Shape</label>
+          <select id="fallbackShape" data-lock>
+            <option value="circle">Circle</option>
+            <option value="square">Square</option>
+            <option value="triangle">Triangle</option>
+            <option value="star">Star</option>
+            <option value="diamond">Diamond</option>
+            <option value="cross">Cross</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="colorMode">SVG Color</label>
+          <select id="colorMode" data-lock>
+            <option value="sample">Tint to Video Color</option>
+            <option value="native">Keep Original SVG</option>
+            <option value="white">Tint White</option>
+          </select>
+        </div>
+        <div class="toggle-row">
+          <label class="toggle"><input id="rotate" data-lock type="checkbox"> Rotate by Brightness</label>
+        </div>
+      </section>
+      <section class="section">
+        <h2>4. Background & Export</h2>
+        <div class="toggle-row">
+          <label class="toggle"><input id="transparent" data-lock type="checkbox" checked> Transparent Background</label>
+        </div>
+        <div class="color-row" style="margin: 10px 0">
+          <label for="bgColor">Opaque Bg Color</label>
+          <input id="bgColor" data-lock type="color" value="#10141b">
+        </div>
+        <div class="control">
+          <label class="control-label" for="backgroundMode">Cutout Logic</label>
+          <select id="backgroundMode" data-lock>
+            <option value="dark">Remove Dark Pixels</option>
+            <option value="light">Remove Light Pixels</option>
+            <option value="none">Keep All</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="cutoff">
+            <span>Cutout Threshold</span><output id="cutoffValue">5%</output>
+          </label>
+          <input id="cutoff" data-lock type="range" min="0" max="95" value="5">
+        </div>
+        <div class="control">
+          <label class="control-label" for="outputWidth">Output Width</label>
+          <input id="outputWidth" data-lock type="number" min="240" max="1280" step="80" value="480">
+        </div>
+        <div class="control">
+          <label class="control-label" for="duration">Duration (sec)</label>
+          <input id="duration" data-lock type="number" min="0.5" max="15" step="0.5" value="4">
+        </div>
+        <div class="control">
+          <label class="control-label" for="fps">Export FPS</label>
+          <input id="fps" data-lock type="number" min="4" max="20" step="1" value="12">
+        </div>
+        <div class="button-row" style="margin: 14px 0 9px">
+          <button class="btn" id="playPause" disabled data-lock>Play</button>
+          <button class="btn" id="saveFrame" data-lock>Save PNG</button>
+        </div>
+        <div class="export-grid">
+          <button class="btn primary" id="exportSvg" disabled data-lock>SVG</button>
+          <button class="btn" id="exportGif" disabled data-lock>GIF</button>
+          <button class="btn" id="exportWebm" disabled data-lock>WebM</button>
+          <button class="btn" id="exportMp4" disabled data-lock>MP4</button>
+        </div>
+        <p class="small-note">
+          WebM/MP4 export contains no audio. MP4 is always opaque. GIF transparency is 1-bit (on/off).
+        </p>
+      </section>
+    </aside>
+    <section class="stage">
+      <div class="stage-head">
+        <h2 class="stage-title">Preview</h2>
+        <span class="stage-hint">Checkerboard = Transparency</span>
+      </div>
+      <div class="preview">
+        <canvas id="canvas" width="480" height="270"></canvas>
+        <div class="placeholder" id="placeholder">
+          <div class="placeholder-icon">✦</div>
+          <div>Choose a video to start.<br>Add SVGs to use them as animated cells.</div>
+        </div>
+      </div>
+      <div class="timeline">
+        <button class="btn" id="timelinePlay" disabled data-lock style="min-height: 32px; padding: 6px 12px;">▶</button>
+        <input id="seek" type="range" min="0" max="1000" value="0" disabled data-lock>
+        <span class="time-label" id="timeLabel">0:00 / 0:00</span>
+      </div>
+      <p class="status" id="status" aria-live="polite">Ready. Load a video to begin.</p>
+    </section>
+  </div>
+</div>
+<!-- GIF encoding dependency. Other exports do not require this library. -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
+<script>
+(() => {
+  'use strict';
+  const $ = id => document.getElementById(id);
+  const video = $('sourceVideo');
+  const canvas = $('canvas');
+  const ctx = canvas.getContext('2d', { alpha: true });
+  const sampleCanvas = document.createElement('canvas');
+  const sampleCtx = sampleCanvas.getContext('2d', { willReadFrequently: true });
+  const tintCanvas = document.createElement('canvas');
+  tintCanvas.width = 32;
+  tintCanvas.height = 32;
+  const tintCtx = tintCanvas.getContext('2d');
+  let videoUrl = null;
+  let svgAssets = [];
+  let busy = false;
+  let recordingOpaque = false;
+  let lastRenderedTime = -1;
+  const exportButtons = [
+    $('exportSvg'), $('exportGif'), $('exportWebm'), $('exportMp4')
+  ];
+  function setStatus(message) {
+    $('status').textContent = message;
+  }
+  function syncActionButtons() {
+    const hasVideo = !!video.videoWidth;
+    $('playPause').disabled = busy || !hasVideo;
+    $('timelinePlay').disabled = busy || !hasVideo;
+    $('seek').disabled = busy || !hasVideo;
+    for (const button of exportButtons) {
+      button.disabled = busy || !hasVideo;
+    }
+  }
+  function setBusy(value) {
+    busy = value;
+    document.querySelectorAll('[data-lock]').forEach(el => {
+      el.disabled = value;
+    });
+    syncActionButtons();
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+  function updateLabels() {
+    $('cellValue').textContent = `${$('cellSize').value} px`;
+    $('scaleValue').textContent = Number($('scale').value).toFixed(2);
+    $('gapValue').textContent = `${$('gap').value} px`;
+    const contrast = Number($('contrast').value);
+    $('contrastValue').textContent = `${contrast > 0 ? '+' : ''}${contrast}`;
+    $('cutoffValue').textContent = `${$('cutoff').value}%`;
+    const brightness = Number($('brightness').value);
+    $('brightnessValue').textContent = `${brightness > 0 ? '+' : ''}${brightness}`;
+    const saturation = Number($('saturation').value);
+    $('saturationValue').textContent = `${saturation > 0 ? '+' : ''}${saturation}`;
+    $('tintOpacityValue').textContent = `${$('tintOpacity').value}%`;
+  }
+  function resizeCanvasForVideo() {
+    if (!video.videoWidth || !video.videoHeight) return;
+    const wantedWidth = clamp(Number($('outputWidth').value) || 480, 240, 1280);
+    const maxHeight = 1280;
+    const ratio = Math.min(
+      wantedWidth / video.videoWidth,
+      maxHeight / video.videoHeight
+    );
+    const width = Math.max(1, Math.round(video.videoWidth * ratio));
+    const height = Math.max(1, Math.round(video.videoHeight * ratio));
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      sampleCanvas.width = width;
+      sampleCanvas.height = height;
+    }
+  }
+  function adjustChannel(value, factor) {
+    return clamp(factor * (value - 128) + 128, 0, 255);
+  }
+  // Color Grading Logic
+  function gradeColor(r, g, b) {
+    // Brightness adjustment
+    const brightness = Number($('brightness').value);
+    if (brightness !== 0) {
+      const adj = brightness * 2.55;
+      r += adj;
+      g += adj;
+      b += adj;
+    }
+    // Saturation adjustment
+    const saturation = Number($('saturation').value);
+    if (saturation !== 0) {
+      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
+      const factor = 1 + (saturation / 100);
+      r = luma + (r - luma) * factor;
+      g = luma + (g - luma) * factor;
+      b = luma + (b - luma) * factor;
+    }
+    // Tint overlay
+    const tintOpacity = Number($('tintOpacity').value) / 100;
+    if (tintOpacity > 0) {
+      const hex = $('tintColor').value.replace(/^#/, '');
+      const tR = parseInt(hex.substring(0, 2), 16);
+      const tG = parseInt(hex.substring(2, 4), 16);
+      const tB = parseInt(hex.substring(4, 6), 16);
+      r = r * (1 - tintOpacity) + tR * tintOpacity;
+      g = g * (1 - tintOpacity) + tG * tintOpacity;
+      b = b * (1 - tintOpacity) + tB * tintOpacity;
+    }
+    return [
+      clamp(Math.round(r), 0, 255),
+      clamp(Math.round(g), 0, 255),
+      clamp(Math.round(b), 0, 255)
+    ];
+  }
+  function drawAssetCentered(targetCtx, asset, boxSize) {
+    const iw = asset.width || asset.image.naturalWidth || 100;
+    const ih = asset.height || asset.image.naturalHeight || 100;
+    const scale = Math.min(boxSize / iw, boxSize / ih);
+    targetCtx.drawImage(
+      asset.image,
+      -iw * scale / 2,
+      -ih * scale / 2,
+      iw * scale,
+      ih * scale
+    );
+  }
+  function drawBuiltin(targetCtx, type, size, color) {
+    const r = size / 2;
+    targetCtx.fillStyle = color;
+    targetCtx.beginPath();
+    switch (type) {
+      case 'square':
+        targetCtx.rect(-r, -r, size, size);
+        break;
+      case 'triangle':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, r);
+        targetCtx.lineTo(-r, r);
+        targetCtx.closePath();
+        break;
+      case 'star':
+        for (let i = 0; i < 10; i++) {
+          const angle = -Math.PI / 2 + i * Math.PI / 5;
+          const radius = i % 2 === 0 ? r : r * 0.43;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+          if (i === 0) targetCtx.moveTo(x, y);
+          else targetCtx.lineTo(x, y);
+        }
+        targetCtx.closePath();
+        break;
+      case 'diamond':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, 0);
+        targetCtx.lineTo(0, r);
+        targetCtx.lineTo(-r, 0);
+        targetCtx.closePath();
+        break;
+      case 'cross':
+        targetCtx.rect(-r * 0.28, -r, r * 0.56, size);
+        targetCtx.rect(-r, -r * 0.28, size, r * 0.56);
+        break;
+      default:
+        targetCtx.arc(0, 0, r, 0, Math.PI * 2);
+        break;
+    }
+    targetCtx.fill();
+  }
+  function drawTintedAsset(asset, color, size) {
+    tintCtx.clearRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.save();
+    tintCtx.translate(tintCanvas.width / 2, tintCanvas.height / 2);
+    drawAssetCentered(tintCtx, asset, tintCanvas.width - 2);
+    tintCtx.restore();
+    tintCtx.globalCompositeOperation = 'source-in';
+    tintCtx.fillStyle = color;
+    tintCtx.fillRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.globalCompositeOperation = 'source-over';
+    ctx.drawImage(
+      tintCanvas,
+      -size / 2,
+      -size / 2,
+      size,
+      size
+    );
+  }
+  function renderFrame(forceOpaque = false) {
+    if (!video.videoWidth || video.readyState < 2) return;
+    resizeCanvasForVideo();
+    const width = canvas.width;
+    const height = canvas.height;
+    sampleCtx.drawImage(video, 0, 0, width, height);
+    const pixels = sampleCtx.getImageData(0, 0, width, height).data;
+    ctx.clearRect(0, 0, width, height);
+    const isTransparent = $('transparent').checked && !forceOpaque;
+    if (!isTransparent) {
+      ctx.fillStyle = $('bgColor').value;
+      ctx.fillRect(0, 0, width, height);
+    }
+    const cell = Number($('cellSize').value);
+    const scaleSetting = Number($('scale').value);
+    const gap = Number($('gap').value);
+    const cutoff = Number($('cutoff').value) / 100;
+    const contrast = Number($('contrast').value);
+    const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+    const columns = Math.ceil(width / cell);
+    const rows = Math.ceil(height / cell);
+    const sizeMode = $('sizeMode').value;
+    const backgroundMode = $('backgroundMode').value;
+    const colorMode = $('colorMode').value;
+    const rotate = $('rotate').checked;
+    const fallbackShape = $('fallbackShape').value;
+    for (let row = 0; row < rows; row++) {
+      const y = row * cell;
+      for (let column = 0; column < columns; column++) {
+        const x = column * cell;
+        const sampleX = Math.min(width - 1, Math.floor(x + cell / 2));
+        const sampleY = Math.min(height - 1, Math.floor(y + cell / 2));
+        const index = (sampleY * width + sampleX) * 4;
+        const alpha = pixels[index + 3] / 255;
+        if (alpha < 0.04) continue;
+        let red = adjustChannel(pixels[index], contrastFactor);
+        let green = adjustChannel(pixels[index + 1], contrastFactor);
+        let blue = adjustChannel(pixels[index + 2], contrastFactor);
+        // Apply Color Grading
+        [red, green, blue] = gradeColor(red, green, blue);
+        const luma = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+        if (backgroundMode === 'dark' && luma < cutoff) continue;
+        if (backgroundMode === 'light' && luma > 1 - cutoff) continue;
+        const brightness = sizeMode === 'dark' ? 1 - luma : luma;
+        const size = Math.min(
+          cell * 1.8,
+          Math.max(0, cell * scaleSetting * (0.12 + 0.88 * brightness) - gap)
+        );
+        if (size < 1) continue;
+        const color = colorMode === 'white'
+          ? '#ffffff'
+          : `rgb(${Math.round(red)},${Math.round(green)},${Math.round(blue)})`;
+        const asset = svgAssets.length
+          ? svgAssets[(row * columns + column) % svgAssets.length]
+          : null;
+        ctx.save();
+        ctx.translate(x + cell / 2, y + cell / 2);
+        ctx.globalAlpha = alpha;
+        if (rotate) {
+          ctx.rotate((luma - 0.5) * Math.PI);
+        }
+        if (asset) {
+          if (colorMode === 'native') {
+            drawAssetCentered(ctx, asset, size);
+          } else {
+            drawTintedAsset(asset, color, size);
+          }
+        } else {
+          drawBuiltin(ctx, fallbackShape, size, color);
+        }
+        ctx.restore();
+      }
+    }
+    lastRenderedTime = video.currentTime;
+    $('placeholder').style.display = 'none';
+  }
+  function renderSafely() {
+    try {
+      renderFrame(recordingOpaque);
+    } catch (error) {
+      console.error(error);
+      setStatus(`Preview error: ${error.message}`);
+    }
+  }
+  function sanitizeSvg(source) {
+    const doc = new DOMParser().parseFromString(source, 'image/svg+xml');
+    if (doc.querySelector('parsererror')) {
+      throw new Error('The selected file is not valid SVG.');
+    }
+    const root = doc.documentElement;
+    if (!root || root.localName.toLowerCase() !== 'svg') {
+      throw new Error('No <svg> element was found in that file.');
+    }
+    const blocked = new Set(['script', 'foreignobject', 'iframe', 'object', 'embed']);
+    for (const element of [...root.querySelectorAll('*')]) {
+      if (blocked.has(element.localName.toLowerCase())) {
+        element.remove();
+        continue;
+      }
+      for (const attribute of [...element.attributes]) {
+        const name = attribute.name.toLowerCase();
+        const value = attribute.value.trim();
+        if (name.startsWith('on')) {
+          element.removeAttributeNode(attribute);
+          continue;
+        }
+        if ((name === 'href' || name === 'xlink:href' || name === 'src') &&
+            value &&
+            !value.startsWith('#') &&
+            !/^data:image\//i.test(value)) {
+          element.removeAttributeNode(attribute);
+          continue;
+        }
+        if (/url\(\s*(['"]?)(?:https?:|\/\/|file:|javascript:)/i.test(value)) {
+          element.removeAttributeNode(attribute);
+        }
+      }
+    }
+    for (const style of [...root.querySelectorAll('style')]) {
+      if (/@import|url\(\s*(['"]?)(?:https?:|\/\/|file:)/i.test(style.textContent)) {
+        style.remove();
+      }
+    }
+    if (!root.hasAttribute('xmlns')) {
+      root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+    const viewBoxText = root.getAttribute('viewBox') || '';
+    const values = viewBoxText.trim().split(/[\s,]+/).map(Number);
+    let viewX = 0;
+    let viewY = 0;
+    let viewWidth = 100;
+    let viewHeight = 100;
+    if (values.length === 4 && values.every(Number.isFinite) && values[2] > 0 && values[3] > 0) {
+      [viewX, viewY, viewWidth, viewHeight] = values;
+    } else {
+      viewWidth = parseFloat(root.getAttribute('width')) || 100;
+      viewHeight = parseFloat(root.getAttribute('height')) || 100;
+      root.setAttribute('viewBox', `0 0 ${viewWidth} ${viewHeight}`);
+    }
+    root.setAttribute('width', String(viewWidth));
+    root.setAttribute('height', String(viewHeight));
+    return {
+      text: new XMLSerializer().serializeToString(root),
+      width: viewWidth,
+      height: viewHeight
+    };
+  }
+  function loadSvgImage(file, parsed) {
+    const blob = new Blob([parsed.text], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve({
+        name: file.name,
+        image,
+        url,
+        width: parsed.width,
+        height: parsed.height
+      });
+      image.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error(`Could not load ${file.name}.`));
+      };
+      image.src = url;
+    });
+  }
+  function updateIconStatus() {
+    if (!svgAssets.length) {
+      $('iconStatus').textContent = 'No SVGs loaded — circles will be used.';
+      return;
+    }
+    $('iconStatus').textContent =
+      `${svgAssets.length} SVG${svgAssets.length === 1 ? '' : 's'} loaded: ` +
+      svgAssets.map(asset => asset.name).join(', ');
+  }
+  function clearSvgAssets() {
+    for (const asset of svgAssets) URL.revokeObjectURL(asset.url);
+    svgAssets = [];
+    updateIconStatus();
+    renderSafely();
+  }
+  function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+    const minutes = Math.floor(seconds / 60);
+    const wholeSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${String(wholeSeconds).padStart(2, '0')}`;
+  }
+  function updateTimeline() {
+    if (!video.videoWidth || !Number.isFinite(video.duration) || video.duration <= 0) {
+      $('timeLabel').textContent = '0:00 / 0:00';
+      return;
+    }
+    $('seek').value = String(Math.round(video.currentTime / video.duration * 1000));
+    $('timeLabel').textContent =
+      `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
+  }
+  function seekTo(seconds) {
+    return new Promise((resolve, reject) => {
+      const duration = video.duration;
+      const maximum = Number.isFinite(duration) && duration > 0
+        ? Math.max(0, duration - 0.01)
+        : Math.max(0, seconds);
+      const target = clamp(seconds, 0, maximum);
+      if (!video.seeking && Math.abs(video.currentTime - target) < 0.001) {
+        resolve();
+        return;
+      }
+      let timer;
+      const finish = () => {
+        clearTimeout(timer);
+        video.removeEventListener('seeked', finish);
+        resolve();
+      };
+      video.addEventListener('seeked', finish);
+      timer = setTimeout(finish, 8000);
+      try {
+        video.currentTime = target;
+      } catch (error) {
+        clearTimeout(timer);
+        video.removeEventListener('seeked', finish);
+        reject(error);
+      }
+    });
+  }
+  function exportSettings() {
+    const fps = clamp(Math.round(Number($('fps').value) || 12), 4, 20);
+    const seconds = clamp(Number($('duration').value) || 4, 0.5, 15);
+    const frameCount = Math.max(1, Math.ceil(seconds * fps));
+    return {
+      fps,
+      frameCount,
+      duration: frameCount / fps
+    };
+  }
+  async function captureFrames(onFrame, label) {
+    if (!video.videoWidth) throw new Error('Choose a video first.');
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    const mediaDuration = Number.isFinite(video.duration) && video.duration > 0
+      ? video.duration
+      : null;
+    video.pause();
+    try {
+      for (let i = 0; i < settings.frameCount; i++) {
+        const time = mediaDuration
+          ? (i / settings.fps) % mediaDuration
+          : i / settings.fps;
+        await seekTo(time);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        renderFrame(false);
+        await onFrame(i, {
+          ...settings,
+          width: canvas.width,
+          height: canvas.height
+        });
+        setStatus(`${label}: rendering frame ${i + 1} of ${settings.frameCount}…`);
+      }
+      return {
+        ...settings,
+        width: canvas.width,
+        height: canvas.height
+      };
+    } finally {
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) {
+        await video.play().catch(() => {});
+      }
+      renderSafely();
+      updateTimeline();
+    }
+  }
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 60000);
+  }
+  function numberText(value) {
+    return Number(value.toFixed(6)).toString();
+  }
+  function makeAnimatedSvg(frames, width, height, fps) {
+    const count = frames.length;
+    const duration = count / fps;
+    const durationText = numberText(duration);
+    const imageElements = frames.map((data, index) => {
+      let animation = '';
+      if (count > 1) {
+        let values;
+        let keyTimes;
+        if (index === 0) {
+          values = 'visible;hidden;hidden';
+          keyTimes = `0;${numberText(1 / count)};1`;
+        } else if (index === count - 1) {
+          values = `hidden;visible;hidden`;
+          keyTimes = `0;${numberText(index / count)};1`;
+        } else {
+          values = 'hidden;visible;hidden;hidden';
+          keyTimes =
+            `0;${numberText(index / count)};${numberText((index + 1) / count)};1`;
+        }
+        animation =
+          `<animate attributeName="visibility" calcMode="discrete" ` +
+          `values="${values}" keyTimes="${keyTimes}" ` +
+          `dur="${durationText}s" repeatCount="indefinite"/>`;
+      }
+      const initialVisibility = index === 0 ? 'visible' : 'hidden';
+      return `<image x="0" y="0" width="${width}" height="${height}" ` +
+        `visibility="${initialVisibility}" href="${data}" xlink:href="${data}">` +
+        `${animation}</image>`;
+    }).join('\n');
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+${imageElements}
+</svg>`;
+  }
+  $('uploadVideoBtn').addEventListener('click', () => $('videoInput').click());
+  $('addSvgBtn').addEventListener('click', () => $('svgInput').click());
+  $('videoInput').addEventListener('change', event => {
+    const file = event.target.files && event.target.files[0];
+    if (!file) return;
+    video.pause();
+    if (videoUrl) URL.revokeObjectURL(videoUrl);
+    videoUrl = URL.createObjectURL(file);
+    video.src = videoUrl;
+    video.loop = true;
+    video.muted = true;
+    video.load();
+    $('placeholder').style.display = 'block';
+    setStatus(`Loading ${file.name}…`);
+    event.target.value = '';
+  });
+  video.addEventListener('loadedmetadata', () => {
+    resizeCanvasForVideo();
+    $('seek').disabled = false;
+    $('timelinePlay').disabled = false;
+    $('playPause').disabled = false;
+    $('placeholder').style.display = 'none';
+    updateTimeline();
+    renderSafely();
+    syncActionButtons();
+    setStatus(`Video loaded: ${video.videoWidth} × ${video.videoHeight}.`);
+    video.play().catch(() => {
+      setStatus('Video loaded. Press Play to start the preview.');
+    });
+  });
+  video.addEventListener('loadeddata', () => renderSafely());
+  video.addEventListener('seeked', () => {
+    renderSafely();
+    updateTimeline();
+  });
+  video.addEventListener('timeupdate', updateTimeline);
+  video.addEventListener('play', () => {
+    $('playPause').textContent = 'Pause';
+    $('timelinePlay').textContent = '⏸';
+  });
+  video.addEventListener('pause', () => {
+    $('playPause').textContent = 'Play';
+    $('timelinePlay').textContent = '▶';
+    renderSafely();
+  });
+  video.addEventListener('error', () => {
+    setStatus('Could not read that video. Try an MP4 or WebM file supported by your browser.');
+  });
+  $('svgInput').addEventListener('change', async event => {
+    const files = [...(event.target.files || [])];
+    event.target.value = '';
+    if (!files.length) return;
+    let added = 0;
+    for (const file of files) {
+      if (!file.name.toLowerCase().endsWith('.svg') && file.type !== 'image/svg+xml') {
+        continue;
+      }
+      try {
+        const parsed = sanitizeSvg(await file.text());
+        const asset = await loadSvgImage(file, parsed);
+        svgAssets.push(asset);
+        added++;
+      } catch (error) {
+        console.warn(error);
+        setStatus(error.message);
+      }
+    }
+    updateIconStatus();
+    renderSafely();
+    if (added) {
+      setStatus(`Added ${added} SVG${added === 1 ? '' : 's'}. All loaded SVGs cycle across the cells.`);
+    }
+  });
+  $('clearSvgBtn').addEventListener('click', clearSvgAssets);
+  function togglePlayback() {
+    if (!video.videoWidth) return;
+    if (video.paused) {
+      video.play().catch(() => setStatus('The video could not be played.'));
+    } else {
+      video.pause();
+    }
+  }
+  $('playPause').addEventListener('click', togglePlayback);
+  $('timelinePlay').addEventListener('click', togglePlayback);
+  $('seek').addEventListener('input', event => {
+    if (!video.videoWidth || !Number.isFinite(video.duration)) return;
+    video.pause();
+    const fraction = Number(event.target.value) / 1000;
+    video.currentTime = fraction * video.duration;
+  });
+  const renderControlIds = [
+    'cellSize', 'scale', 'gap', 'contrast', 'sizeMode',
+    'backgroundMode', 'cutoff', 'fallbackShape', 'colorMode',
+    'rotate', 'transparent', 'bgColor', 'outputWidth',
+    'brightness', 'saturation', 'tintColor', 'tintOpacity'
+  ];
+  for (const id of renderControlIds) {
+    $(id).addEventListener('input', () => {
+      updateLabels();
+      renderSafely();
+    });
+    $(id).addEventListener('change', () => {
+      updateLabels();
+      renderSafely();
+    });
+  }
+  $('saveFrame').addEventListener('click', async () => {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+    if (!blob) {
+      setStatus('Could not create the PNG.');
+      return;
+    }
+    downloadBlob(blob, `brain-motion-${Date.now()}.png`);
+    setStatus('Saved the current frame as a transparent PNG.');
+  });
+  $('exportSvg').addEventListener('click', async () => {
+    setBusy(true);
+    setStatus('Preparing animated SVG frames…');
+    try {
+      const frames = [];
+      const meta = await captureFrames(async () => {
+        frames.push(canvas.toDataURL('image/png'));
+      }, 'SVG');
+      const svg = makeAnimatedSvg(frames, meta.width, meta.height, meta.fps);
+      downloadBlob(
+        new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }),
+        `brain-motion-${Date.now()}.svg`
+      );
+      setStatus('Saved animated SVG. It embeds transparent PNG frames inside an SVG animation.');
+    } catch (error) {
+      setStatus(`SVG export failed: ${error.message}`);
+    } finally {
+      setBusy(false);
+    }
+  });
+  async function fetchGifWorker() {
+    const url = 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js';
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error('Could not download the GIF encoder worker. Run this page from localhost and check your internet connection.');
+    }
+    const workerSource = await response.text();
+    return URL.createObjectURL(
+      new Blob([workerSource], { type: 'application/javascript' })
+    );
+  }
+  $('exportGif').addEventListener('click', async () => {
+    if (!window.GIF) {
+      setStatus('GIF encoder did not load. Check your internet connection and reload the page.');
+      return;
+    }
+    setBusy(true);
+    let workerUrl = null;
+    try {
+      setStatus('Loading GIF encoder…');
+      workerUrl = await fetchGifWorker();
+      const options = {
+        workers: 2,
+        quality: 10,
+        repeat: 0,
+        width: canvas.width,
+        height: canvas.height,
+        workerScript: workerUrl
+      };
+      const usesTransparency = $('transparent').checked;
+      const transparentKey = 0xff00ff;
+      if (usesTransparency) options.transparent = transparentKey;
+      const gif = new window.GIF(options);
+      const gifCanvas = document.createElement('canvas');
+      gifCanvas.width = canvas.width;
+      gifCanvas.height = canvas.height;
+      const gifCtx = gifCanvas.getContext('2d', { willReadFrequently: true });
+      const finished = new Promise((resolve, reject) => {
+        gif.on('finished', resolve);
+        gif.on('error', reject);
+        gif.on('progress', progress => {
+          setStatus(`Encoding GIF: ${Math.round(progress * 100)}%…`);
+        });
+      });
+      await captureFrames(async (index, meta) => {
+        const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = frame.data;
+        for (let i = 0; i < data.length; i += 4) {
+          if (usesTransparency && data[i + 3] < 128) {
+            data[i] = 255;
+            data[i + 1] = 0;
+            data[i + 2] = 255;
+            data[i + 3] = 255;
+          } else {
+            data[i + 3] = 255;
+            // Keep actual magenta artwork from matching the transparent key.
+            if (usesTransparency && data[i] === 255 && data[i + 1] === 0 && data[i + 2] === 255) {
+              data[i + 1] = 1;
+            }
+          }
+        }
+        gifCtx.putImageData(frame, 0, 0);
+        gif.addFrame(gifCanvas, {
+          copy: true,
+          delay: Math.max(20, Math.round(1000 / meta.fps))
+        });
+        setStatus(`GIF: preparing frame ${index + 1} of ${meta.frameCount}…`);
+      }, 'GIF');
+      setStatus('Encoding GIF…');
+      gif.render();
+      const blob = await finished;
+      downloadBlob(blob, `brain-motion-${Date.now()}.gif`);
+      setStatus('Saved GIF. GIF transparency is limited to transparent/opaque pixels.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`GIF export failed: ${error.message || 'Check that the page is served from localhost.'}`);
+    } finally {
+      if (workerUrl) URL.revokeObjectURL(workerUrl);
+      setBusy(false);
+    }
+  });
+  async function exportRecordedVideo(kind) {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    if (!window.MediaRecorder || !canvas.captureStream) {
+      setStatus('This browser does not support canvas video recording. Try a current version of Chrome or Edge.');
+      return;
+    }
+    const mimeCandidates = kind === 'mp4'
+      ? ['video/mp4;codecs=avc1.42E01E', 'video/mp4;codecs=avc1', 'video/mp4']
+      : ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'];
+    const mimeType = mimeCandidates.find(type => MediaRecorder.isTypeSupported(type));
+    if (!mimeType) {
+      setStatus(kind === 'mp4'
+        ? 'MP4 recording is not supported by this browser. MP4 support is browser-dependent; use WebM instead.'
+        : 'WebM recording is not supported by this browser.');
+      return;
+    }
+    setBusy(true);
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    let stream = null;
+    let recorder = null;
+    try {
+      video.pause();
+      await seekTo(0);
+      recordingOpaque = kind === 'mp4';
+      renderFrame(recordingOpaque);
+      stream = canvas.captureStream(settings.fps);
+      recorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: 5_000_000
+      });
+      const chunks = [];
+      const recordingFinished = new Promise((resolve, reject) => {
+        recorder.addEventListener('dataavailable', event => {
+          if (event.data && event.data.size) chunks.push(event.data);
+        });
+        recorder.addEventListener('stop', () => {
+          resolve(new Blob(chunks, { type: recorder.mimeType || mimeType }));
+        });
+        recorder.addEventListener('error', event => {
+          reject(event.error || new Error('Video recording failed.'));
+        });
+      });
+      recorder.start(200);
+      await video.play();
+      setStatus(`Recording ${kind.toUpperCase()} for ${settings.duration.toFixed(1)} seconds…`);
+      await new Promise(resolve => setTimeout(resolve, settings.duration * 1000));
+      video.pause();
+      if (recorder.state !== 'inactive') recorder.stop();
+      const blob = await recordingFinished;
+      const extension = kind === 'mp4' ? 'mp4' : 'webm';
+      downloadBlob(blob, `brain-motion-${Date.now()}.${extension}`);
+      setStatus(kind === 'mp4'
+        ? 'Saved MP4 with an opaque background. MP4 does not support transparency.'
+        : 'Saved WebM. Transparent alpha depends on browser and codec support.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`Video export failed: ${error.message}`);
+    } finally {
+      recordingOpaque = false;
+      if (recorder && recorder.state !== 'inactive') {
+        try { recorder.stop(); } catch (_) {}
+      }
+      if (stream) stream.getTracks().forEach(track => track.stop());
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) await video.play().catch(() => {});
+      renderSafely();
+      setBusy(false);
+    }
+  }
+  $('exportWebm').addEventListener('click', () => exportRecordedVideo('webm'));
+  $('exportMp4').addEventListener('click', () => exportRecordedVideo('mp4'));
+  function previewLoop() {
+    if (video.videoWidth &&
+        !video.paused &&
+        video.readyState >= 2 &&
+        video.currentTime !== lastRenderedTime) {
+      renderSafely();
+    }
+    requestAnimationFrame(previewLoop);
+  }
+  updateLabels();
+  updateIconStatus();
+  syncActionButtons();
+  requestAnimationFrame(previewLoop);
+})();
+</script>
+</body>
+</html>

assests/html_sample/index4.html ADDED Viewed

	@@ -0,0 +1,1666 @@

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Brain Motion Studio v4 — Custom Palette & Shades</title>
+<style>
+  :root {
+    color-scheme: dark;
+    --bg: #0b0d12;
+    --panel: #14171f;
+    --panel-2: #1a1e28;
+    --line: #272c3a;
+    --text: #edf2fa;
+    --muted: #8d97a8;
+    --accent: #8a7dff;
+    --accent-2: #6258cf;
+    --radius: 14px;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    min-height: 100vh;
+    background: radial-gradient(circle at top left, #151929, var(--bg) 60%);
+    color: var(--text);
+    font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  button, input, select { font: inherit; }
+  .app {
+    width: min(1480px, 100%);
+    min-height: 100vh;
+    margin: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .logo {
+    display: grid;
+    place-items: center;
+    width: 46px;
+    height: 46px;
+    flex: 0 0 auto;
+    border-radius: 14px;
+    background: linear-gradient(140deg, #a69cff, #5f54cf);
+    color: white;
+    font-size: 24px;
+    box-shadow: 0 4px 12px rgba(98, 88, 207, 0.3);
+  }
+  h1 {
+    margin: 0;
+    font-size: clamp(20px, 3vw, 26px);
+    font-weight: 600;
+    letter-spacing: -.03em;
+  }
+  .subtitle {
+    margin: 2px 0 0;
+    color: var(--muted);
+    font-size: 13px;
+  }
+  .badge {
+    margin-left: 8px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: #252b3d;
+    border: 1px solid var(--accent);
+    color: #c4beff;
+    font-size: 11px;
+    font-weight: 600;
+    vertical-align: middle;
+  }
+  .workspace {
+    display: grid;
+    grid-template-columns: 340px minmax(0, 1fr);
+    gap: 20px;
+    align-items: start;
+    flex: 1;
+  }
+  .panel, .stage {
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    background: var(--panel);
+  }
+  .panel {
+    padding: 16px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--line) transparent;
+  }
+  .panel::-webkit-scrollbar { width: 6px; }
+  .panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
+  .section + .section {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--line);
+  }
+  h2 {
+    margin: 0 0 12px;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: .03em;
+    text-transform: uppercase;
+    color: #bcc5d6;
+  }
+  .small-note, .status, .icon-status {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .small-note { margin: 8px 0 0; line-height: 1.4; }
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .btn {
+    min-height: 36px;
+    padding: 8px 14px;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    background: var(--panel-2);
+    color: var(--text);
+    cursor: pointer;
+    transition: all .15s ease;
+    font-weight: 500;
+  }
+  .btn:hover:not(:disabled) {
+    border-color: #7770d8;
+    background: #24283a;
+  }
+  .btn:active:not(:disabled) { transform: scale(0.97); }
+  .btn.primary {
+    border-color: var(--accent-2);
+    background: var(--accent-2);
+    color: white;
+  }
+  .btn.primary:hover:not(:disabled) { background: #7167e2; }
+  .btn:disabled {
+    opacity: .4;
+    cursor: not-allowed;
+  }
+  .full { width: 100%; }
+  .icon-status {
+    min-height: 16px;
+    margin: 8px 0 0;
+    overflow-wrap: anywhere;
+  }
+  .control { margin: 12px 0; }
+  .control-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 5px;
+    color: #dce3ed;
+    font-size: 12px;
+  }
+  .control-label output {
+    color: #b4aaff;
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+  }
+  input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+    height: 6px;
+  }
+  select, input[type="number"] {
+    width: 100%;
+    min-height: 34px;
+    padding: 6px 10px;
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: #10141c;
+    color: var(--text);
+  }
+  input[type="color"] {
+    width: 40px;
+    height: 30px;
+    padding: 2px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: #10141c;
+    cursor: pointer;
+  }
+  .toggle-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 10px 0;
+  }
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: #dce3ed;
+    font-size: 12px;
+  }
+  .toggle input { accent-color: var(--accent); }
+  .color-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 12px;
+  }
+  .palette-swatches {
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+    align-items: center;
+  }
+  .swatch-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    border: 2px solid #2a3344;
+    cursor: pointer;
+    transition: transform .15s, border-color .15s;
+    padding: 0;
+  }
+  .swatch-btn:hover {
+    transform: scale(1.15);
+    border-color: #a49aff;
+  }
+  .export-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .export-grid .btn { min-height: 42px; font-size: 12px; }
+  .stage {
+    min-width: 0;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+  .stage-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .stage-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .stage-hint {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .preview {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: 400px;
+    overflow: hidden;
+    border: 1px solid #303846;
+    border-radius: 12px;
+    background-color: #10141b;
+    background-image:
+      linear-gradient(45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(-45deg, #1a202a 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #1a202a 75%),
+      linear-gradient(-45deg, transparent 75%, #1a202a 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+    flex: 1;
+  }
+  canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 70vh;
+    object-fit: contain;
+  }
+  .placeholder {
+    position: absolute;
+    padding: 30px;
+    color: var(--muted);
+    text-align: center;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  .placeholder-icon {
+    font-size: 42px;
+    opacity: 0.4;
+    color: var(--accent);
+  }
+  .timeline {
+    display: grid;
+    grid-template-columns: auto minmax(100px, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    margin-top: 14px;
+  }
+  .time-label {
+    min-width: 80px;
+    color: var(--muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+  .timeline input { margin: 0; }
+  .status {
+    min-height: 18px;
+    margin: 12px 0 0;
+    font-size: 11px;
+  }
+  .hidden-input, #sourceVideo { display: none; }
+  @media (max-width: 900px) {
+    .app { padding: 12px; }
+    .workspace { grid-template-columns: 1fr; }
+    .panel { max-height: none; }
+    .preview { min-height: 280px; }
+  }
+</style>
+</head>
+<body>
+<div class="app">
+  <header class="topbar">
+    <div class="logo" aria-hidden="true">✦</div>
+    <div>
+      <h1>Brain Motion Studio <span class="badge">v4</span></h1>
+      <p class="subtitle">Transform video into dynamic SVG-cell artwork with custom color palette & shades of black.</p>
+    </div>
+  </header>
+  <div class="workspace">
+    <aside class="panel">
+      <section class="section">
+        <h2>1. Source Media</h2>
+        <div class="button-row">
+          <button class="btn primary" id="uploadVideoBtn" data-lock>Video</button>
+          <button class="btn" id="addSvgBtn" data-lock>Add SVGs</button>
+          <button class="btn" id="clearSvgBtn" data-lock>Clear SVGs</button>
+        </div>
+        <input class="hidden-input" id="videoInput" type="file" accept="video/*">
+        <input class="hidden-input" id="svgInput" type="file" accept=".svg,image/svg+xml" multiple>
+        <video id="sourceVideo" playsinline muted></video>
+        <p class="icon-status" id="iconStatus">No SVGs loaded — circles will be used.</p>
+        <p class="small-note">Upload a video, then add any number of SVG files. They will automatically cycle through the cells.</p>
+      </section>
+      <section class="section">
+        <h2>2. Color Grading</h2>
+        <div class="control">
+          <label class="control-label" for="brightness">
+            <span>Brightness</span><output id="brightnessValue">0</output>
+          </label>
+          <input id="brightness" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="control">
+          <label class="control-label" for="saturation">
+            <span>Saturation</span><output id="saturationValue">0</output>
+          </label>
+          <input id="saturation" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="color-row" style="margin: 12px 0">
+          <label for="tintColor">Tint / Overlay</label>
+          <input id="tintColor" data-lock type="color" value="#8a7dff">
+        </div>
+        <div class="control">
+          <label class="control-label" for="tintOpacity">
+            <span>Tint Intensity</span><output id="tintOpacityValue">0%</output>
+          </label>
+          <input id="tintOpacity" data-lock type="range" min="0" max="100" value="0">
+        </div>
+      </section>
+      <section class="section">
+        <h2>3. Cell Appearance</h2>
+        <div class="control">
+          <label class="control-label" for="cellSize">
+            <span>Spacing</span><output id="cellValue">14 px</output>
+          </label>
+          <input id="cellSize" data-lock type="range" min="6" max="40" value="14">
+        </div>
+        <div class="control">
+          <label class="control-label" for="scale">
+            <span>Scale</span><output id="scaleValue">0.95</output>
+          </label>
+          <input id="scale" data-lock type="range" min="0.25" max="1.8" step="0.05" value="0.95">
+        </div>
+        <div class="control">
+          <label class="control-label" for="gap">
+            <span>Gap</span><output id="gapValue">1 px</output>
+          </label>
+          <input id="gap" data-lock type="range" min="0" max="12" step="0.5" value="1">
+        </div>
+        <div class="control">
+          <label class="control-label" for="contrast">
+            <span>Contrast</span><output id="contrastValue">0</output>
+          </label>
+          <input id="contrast" data-lock type="range" min="-100" max="100" value="0">
+        </div>
+        <div class="control">
+          <label class="control-label" for="sizeMode">Size Logic</label>
+          <select id="sizeMode" data-lock>
+            <option value="bright">Bright = Larger</option>
+            <option value="dark">Dark = Larger</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="fallbackShape">Fallback Shape</label>
+          <select id="fallbackShape" data-lock>
+            <option value="circle">Circle</option>
+            <option value="square">Square</option>
+            <option value="triangle">Triangle</option>
+            <option value="star">Star</option>
+            <option value="diamond">Diamond</option>
+            <option value="cross">Cross</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="colorMode">SVG Color Mode</label>
+          <select id="colorMode" data-lock>
+            <option value="sample">Tint to Video Color</option>
+            <option value="shadesBlack">Shades of Black (Charcoal)</option>
+            <option value="custom">Custom Color / Palette</option>
+            <option value="white">Tint White</option>
+            <option value="native">Keep Original SVG</option>
+          </select>
+        </div>
+        <!-- Custom Color Palette Controls -->
+        <div id="customColorContainer" style="margin: 10px 0; display: none;">
+          <div class="color-row">
+            <label for="customColor">Color Palette</label>
+            <input id="customColor" data-lock type="color" value="#0a0a0a">
+          </div>
+          <div class="palette-swatches">
+            <span style="font-size:10px; color:var(--muted)">Presets:</span>
+            <button class="swatch-btn" style="background:#000000" title="Pitch Black (#000000)" onclick="setPaletteColor('#000000')"></button>
+            <button class="swatch-btn" style="background:#1a1e24" title="Dark Charcoal (#1a1e24)" onclick="setPaletteColor('#1a1e24')"></button>
+            <button class="swatch-btn" style="background:#2d3748" title="Slate Gray (#2d3748)" onclick="setPaletteColor('#2d3748')"></button>
+            <button class="swatch-btn" style="background:#102a43" title="Midnight Navy (#102a43)" onclick="setPaletteColor('#102a43')"></button>
+            <button class="swatch-btn" style="background:#8a7dff" title="Accent Violet (#8a7dff)" onclick="setPaletteColor('#8a7dff')"></button>
+          </div>
+        </div>
+        <div class="toggle-row">
+          <label class="toggle"><input id="rotate" data-lock type="checkbox"> Rotate by Brightness</label>
+        </div>
+      </section>
+      <section class="section">
+        <h2>4. Background & Export</h2>
+        <div class="toggle-row">
+          <label class="toggle"><input id="transparent" data-lock type="checkbox" checked> Transparent Background</label>
+        </div>
+        <div class="color-row" style="margin: 10px 0">
+          <label for="bgColor">Opaque Bg Color</label>
+          <input id="bgColor" data-lock type="color" value="#10141b">
+        </div>
+        <div class="control">
+          <label class="control-label" for="backgroundMode">Cutout Logic</label>
+          <select id="backgroundMode" data-lock>
+            <option value="dark">Remove Dark Pixels</option>
+            <option value="light">Remove Light Pixels</option>
+            <option value="none">Keep All</option>
+          </select>
+        </div>
+        <div class="control">
+          <label class="control-label" for="cutoff">
+            <span>Cutout Threshold</span><output id="cutoffValue">5%</output>
+          </label>
+          <input id="cutoff" data-lock type="range" min="0" max="95" value="5">
+        </div>
+        <div class="control">
+          <label class="control-label" for="outputWidth">Output Width</label>
+          <input id="outputWidth" data-lock type="number" min="240" max="1280" step="80" value="480">
+        </div>
+        <div class="control">
+          <label class="control-label" for="duration">Duration (sec)</label>
+          <input id="duration" data-lock type="number" min="0.5" max="15" step="0.5" value="4">
+        </div>
+        <div class="control">
+          <label class="control-label" for="fps">Export FPS</label>
+          <input id="fps" data-lock type="number" min="4" max="20" step="1" value="12">
+        </div>
+        <div class="button-row" style="margin: 14px 0 9px">
+          <button class="btn" id="playPause" disabled data-lock>Play</button>
+          <button class="btn" id="saveFrame" data-lock>Save PNG</button>
+        </div>
+        <div class="export-grid">
+          <button class="btn primary" id="exportSvg" disabled data-lock>SVG</button>
+          <button class="btn" id="exportGif" disabled data-lock>GIF</button>
+          <button class="btn" id="exportWebm" disabled data-lock>WebM</button>
+          <button class="btn" id="exportMp4" disabled data-lock>MP4</button>
+        </div>
+        <p class="small-note">
+          WebM/MP4 export contains no audio. MP4 is always opaque. GIF transparency is 1-bit (on/off).
+        </p>
+      </section>
+    </aside>
+    <section class="stage">
+      <div class="stage-head">
+        <h2 class="stage-title">Preview</h2>
+        <span class="stage-hint">Checkerboard = Transparency</span>
+      </div>
+      <div class="preview">
+        <canvas id="canvas" width="480" height="270"></canvas>
+        <div class="placeholder" id="placeholder">
+          <div class="placeholder-icon">✦</div>
+          <div>Choose a video to start.<br>Add SVGs to use them as animated cells.</div>
+        </div>
+      </div>
+      <div class="timeline">
+        <button class="btn" id="timelinePlay" disabled data-lock style="min-height: 32px; padding: 6px 12px;">▶</button>
+        <input id="seek" type="range" min="0" max="1000" value="0" disabled data-lock>
+        <span class="time-label" id="timeLabel">0:00 / 0:00</span>
+      </div>
+      <p class="status" id="status" aria-live="polite">Ready. Load a video to begin.</p>
+    </section>
+  </div>
+</div>
+<!-- GIF encoding dependency. Other exports do not require this library. -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
+<script>
+(() => {
+  'use strict';
+  const $ = id => document.getElementById(id);
+  const video = $('sourceVideo');
+  const canvas = $('canvas');
+  const ctx = canvas.getContext('2d', { alpha: true });
+  const sampleCanvas = document.createElement('canvas');
+  const sampleCtx = sampleCanvas.getContext('2d', { willReadFrequently: true });
+  const tintCanvas = document.createElement('canvas');
+  tintCanvas.width = 32;
+  tintCanvas.height = 32;
+  const tintCtx = tintCanvas.getContext('2d');
+  let videoUrl = null;
+  let svgAssets = [];
+  let busy = false;
+  let recordingOpaque = false;
+  let lastRenderedTime = -1;
+  window.setPaletteColor = function(colorHex) {
+    const picker = $('customColor');
+    if (picker) {
+      picker.value = colorHex;
+      renderSafely();
+    }
+  };
+  const exportButtons = [
+    $('exportSvg'), $('exportGif'), $('exportWebm'), $('exportMp4')
+  ];
+  function setStatus(message) {
+    $('status').textContent = message;
+  }
+  function syncActionButtons() {
+    const hasVideo = !!video.videoWidth;
+    $('playPause').disabled = busy || !hasVideo;
+    $('timelinePlay').disabled = busy || !hasVideo;
+    $('seek').disabled = busy || !hasVideo;
+    for (const button of exportButtons) {
+      button.disabled = busy || !hasVideo;
+    }
+  }
+  function setBusy(value) {
+    busy = value;
+    document.querySelectorAll('[data-lock]').forEach(el => {
+      el.disabled = value;
+    });
+    syncActionButtons();
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+  function updateLabels() {
+    $('cellValue').textContent = `${$('cellSize').value} px`;
+    $('scaleValue').textContent = Number($('scale').value).toFixed(2);
+    $('gapValue').textContent = `${$('gap').value} px`;
+    const contrast = Number($('contrast').value);
+    $('contrastValue').textContent = `${contrast > 0 ? '+' : ''}${contrast}`;
+    $('cutoffValue').textContent = `${$('cutoff').value}%`;
+    const brightness = Number($('brightness').value);
+    $('brightnessValue').textContent = `${brightness > 0 ? '+' : ''}${brightness}`;
+    const saturation = Number($('saturation').value);
+    $('saturationValue').textContent = `${saturation > 0 ? '+' : ''}${saturation}`;
+    $('tintOpacityValue').textContent = `${$('tintOpacity').value}%`;
+  }
+  function resizeCanvasForVideo() {
+    if (!video.videoWidth || !video.videoHeight) return;
+    const wantedWidth = clamp(Number($('outputWidth').value) || 480, 240, 1280);
+    const maxHeight = 1280;
+    const ratio = Math.min(
+      wantedWidth / video.videoWidth,
+      maxHeight / video.videoHeight
+    );
+    const width = Math.max(1, Math.round(video.videoWidth * ratio));
+    const height = Math.max(1, Math.round(video.videoHeight * ratio));
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      sampleCanvas.width = width;
+      sampleCanvas.height = height;
+    }
+  }
+  function adjustChannel(value, factor) {
+    return clamp(factor * (value - 128) + 128, 0, 255);
+  }
+  // Color Grading Logic
+  function gradeColor(r, g, b) {
+    // Brightness adjustment
+    const brightness = Number($('brightness').value);
+    if (brightness !== 0) {
+      const adj = brightness * 2.55;
+      r += adj;
+      g += adj;
+      b += adj;
+    }
+    // Saturation adjustment
+    const saturation = Number($('saturation').value);
+    if (saturation !== 0) {
+      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
+      const factor = 1 + (saturation / 100);
+      r = luma + (r - luma) * factor;
+      g = luma + (g - luma) * factor;
+      b = luma + (b - luma) * factor;
+    }
+    // Tint overlay
+    const tintOpacity = Number($('tintOpacity').value) / 100;
+    if (tintOpacity > 0) {
+      const hex = $('tintColor').value.replace(/^#/, '');
+      const tR = parseInt(hex.substring(0, 2), 16);
+      const tG = parseInt(hex.substring(2, 4), 16);
+      const tB = parseInt(hex.substring(4, 6), 16);
+      r = r * (1 - tintOpacity) + tR * tintOpacity;
+      g = g * (1 - tintOpacity) + tG * tintOpacity;
+      b = b * (1 - tintOpacity) + tB * tintOpacity;
+    }
+    return [
+      clamp(Math.round(r), 0, 255),
+      clamp(Math.round(g), 0, 255),
+      clamp(Math.round(b), 0, 255)
+    ];
+  }
+  function drawAssetCentered(targetCtx, asset, boxSize) {
+    const iw = asset.width || asset.image.naturalWidth || 100;
+    const ih = asset.height || asset.image.naturalHeight || 100;
+    const scale = Math.min(boxSize / iw, boxSize / ih);
+    targetCtx.drawImage(
+      asset.image,
+      -iw * scale / 2,
+      -ih * scale / 2,
+      iw * scale,
+      ih * scale
+    );
+  }
+  function drawBuiltin(targetCtx, type, size, color) {
+    const r = size / 2;
+    targetCtx.fillStyle = color;
+    targetCtx.beginPath();
+    switch (type) {
+      case 'square':
+        targetCtx.rect(-r, -r, size, size);
+        break;
+      case 'triangle':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, r);
+        targetCtx.lineTo(-r, r);
+        targetCtx.closePath();
+        break;
+      case 'star':
+        for (let i = 0; i < 10; i++) {
+          const angle = -Math.PI / 2 + i * Math.PI / 5;
+          const radius = i % 2 === 0 ? r : r * 0.43;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+          if (i === 0) targetCtx.moveTo(x, y);
+          else targetCtx.lineTo(x, y);
+        }
+        targetCtx.closePath();
+        break;
+      case 'diamond':
+        targetCtx.moveTo(0, -r);
+        targetCtx.lineTo(r, 0);
+        targetCtx.lineTo(0, r);
+        targetCtx.lineTo(-r, 0);
+        targetCtx.closePath();
+        break;
+      case 'cross':
+        targetCtx.rect(-r * 0.28, -r, r * 0.56, size);
+        targetCtx.rect(-r, -r * 0.28, size, r * 0.56);
+        break;
+      default:
+        targetCtx.arc(0, 0, r, 0, Math.PI * 2);
+        break;
+    }
+    targetCtx.fill();
+  }
+  function drawTintedAsset(asset, color, size) {
+    tintCtx.clearRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.save();
+    tintCtx.translate(tintCanvas.width / 2, tintCanvas.height / 2);
+    drawAssetCentered(tintCtx, asset, tintCanvas.width - 2);
+    tintCtx.restore();
+    tintCtx.globalCompositeOperation = 'source-in';
+    tintCtx.fillStyle = color;
+    tintCtx.fillRect(0, 0, tintCanvas.width, tintCanvas.height);
+    tintCtx.globalCompositeOperation = 'source-over';
+    ctx.drawImage(
+      tintCanvas,
+      -size / 2,
+      -size / 2,
+      size,
+      size
+    );
+  }
+  function renderFrame(forceOpaque = false) {
+    if (!video.videoWidth || video.readyState < 2) return;
+    resizeCanvasForVideo();
+    const width = canvas.width;
+    const height = canvas.height;
+    sampleCtx.drawImage(video, 0, 0, width, height);
+    const pixels = sampleCtx.getImageData(0, 0, width, height).data;
+    ctx.clearRect(0, 0, width, height);
+    const isTransparent = $('transparent').checked && !forceOpaque;
+    if (!isTransparent) {
+      ctx.fillStyle = $('bgColor').value;
+      ctx.fillRect(0, 0, width, height);
+    }
+    const cell = Number($('cellSize').value);
+    const scaleSetting = Number($('scale').value);
+    const gap = Number($('gap').value);
+    const cutoff = Number($('cutoff').value) / 100;
+    const contrast = Number($('contrast').value);
+    const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+    const columns = Math.ceil(width / cell);
+    const rows = Math.ceil(height / cell);
+    const sizeMode = $('sizeMode').value;
+    const backgroundMode = $('backgroundMode').value;
+    const colorMode = $('colorMode').value;
+    const rotate = $('rotate').checked;
+    const fallbackShape = $('fallbackShape').value;
+    const customColorVal = $('customColor').value || '#0a0a0a';
+    for (let row = 0; row < rows; row++) {
+      const y = row * cell;
+      for (let column = 0; column < columns; column++) {
+        const x = column * cell;
+        const sampleX = Math.min(width - 1, Math.floor(x + cell / 2));
+        const sampleY = Math.min(height - 1, Math.floor(y + cell / 2));
+        const index = (sampleY * width + sampleX) * 4;
+        const alpha = pixels[index + 3] / 255;
+        if (alpha < 0.04) continue;
+        let red = adjustChannel(pixels[index], contrastFactor);
+        let green = adjustChannel(pixels[index + 1], contrastFactor);
+        let blue = adjustChannel(pixels[index + 2], contrastFactor);
+        // Apply Color Grading
+        [red, green, blue] = gradeColor(red, green, blue);
+        const luma = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+        if (backgroundMode === 'dark' && luma < cutoff) continue;
+        if (backgroundMode === 'light' && luma > 1 - cutoff) continue;
+        const brightness = sizeMode === 'dark' ? 1 - luma : luma;
+        const size = Math.min(
+          cell * 1.8,
+          Math.max(0, cell * scaleSetting * (0.12 + 0.88 * brightness) - gap)
+        );
+        if (size < 1) continue;
+        let color;
+        if (colorMode === 'white') {
+          color = '#ffffff';
+        } else if (colorMode === 'custom') {
+          color = customColorVal;
+        } else if (colorMode === 'shadesBlack') {
+          // Map brightness to deep charcoal & black shades (0 to 45)
+          const shade = Math.round(luma * 45);
+          color = `rgb(${shade},${shade},${shade})`;
+        } else {
+          color = `rgb(${Math.round(red)},${Math.round(green)},${Math.round(blue)})`;
+        }
+        const asset = svgAssets.length
+          ? svgAssets[(row * columns + column) % svgAssets.length]
+          : null;
+        ctx.save();
+        ctx.translate(x + cell / 2, y + cell / 2);
+        ctx.globalAlpha = alpha;
+        if (rotate) {
+          ctx.rotate((luma - 0.5) * Math.PI);
+        }
+        if (asset) {
+          if (colorMode === 'native') {
+            drawAssetCentered(ctx, asset, size);
+          } else {
+            drawTintedAsset(asset, color, size);
+          }
+        } else {
+          drawBuiltin(ctx, fallbackShape, size, color);
+        }
+        ctx.restore();
+      }
+    }
+    lastRenderedTime = video.currentTime;
+    $('placeholder').style.display = 'none';
+  }
+  function renderSafely() {
+    try {
+      renderFrame(recordingOpaque);
+    } catch (error) {
+      console.error(error);
+      setStatus(`Preview error: ${error.message}`);
+    }
+  }
+  function sanitizeSvg(source) {
+    const doc = new DOMParser().parseFromString(source, 'image/svg+xml');
+    if (doc.querySelector('parsererror')) {
+      throw new Error('The selected file is not valid SVG.');
+    }
+    const root = doc.documentElement;
+    if (!root || root.localName.toLowerCase() !== 'svg') {
+      throw new Error('No <svg> element was found in that file.');
+    }
+    const blocked = new Set(['script', 'foreignobject', 'iframe', 'object', 'embed']);
+    for (const element of [...root.querySelectorAll('*')]) {
+      const tag = element.localName.toLowerCase();
+      if (blocked.has(tag)) {
+        element.remove();
+        continue;
+      }
+      for (const attribute of [...element.attributes]) {
+        const name = attribute.name.toLowerCase();
+        const value = attribute.value.trim();
+        if (name.startsWith('on')) {
+          element.removeAttributeNode(attribute);
+        } else if ((name === 'href' || name === 'xlink:href' || name === 'src') &&
+                   value &&
+                   !value.startsWith('#') &&
+                   !/^data:image\//i.test(value)) {
+          element.removeAttributeNode(attribute);
+        } else if (/url\(\s*(['"]?)(?:https?:|\/\/|file:|javascript:)/i.test(value)) {
+          element.removeAttributeNode(attribute);
+        }
+      }
+    }
+    for (const styleElement of [...root.querySelectorAll('style')]) {
+      const content = styleElement.textContent;
+      if (/@import/i.test(content) || /url\(\s*(['"]?)(?:https?:|\/\/|file:)/i.test(content)) {
+        styleElement.remove();
+      }
+    }
+    if (!root.hasAttribute('xmlns')) {
+      root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+    let viewBox = root.getAttribute('viewBox') || '';
+    let parsedValues = viewBox.trim().split(/[\s,]+/).map(Number);
+    let width = 100;
+    let height = 100;
+    if (parsedValues.length === 4 &&
+        parsedValues.every(Number.isFinite) &&
+        parsedValues[2] > 0 &&
+        parsedValues[3] > 0) {
+      width = parsedValues[2];
+      height = parsedValues[3];
+    } else {
+      const widthAttr = parseFloat(root.getAttribute('width'));
+      const heightAttr = parseFloat(root.getAttribute('height'));
+      if (Number.isFinite(widthAttr) && widthAttr > 0 &&
+          Number.isFinite(heightAttr) && heightAttr > 0) {
+        width = widthAttr;
+        height = heightAttr;
+      }
+      root.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    }
+    root.setAttribute('width', String(width));
+    root.setAttribute('height', String(height));
+    return {
+      text: new XMLSerializer().serializeToString(root),
+      width,
+      height
+    };
+  }
+  function loadSvgImage(file, parsedSvg) {
+    const blob = new Blob([parsedSvg.text], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => {
+        resolve({
+          name: file.name,
+          image,
+          url,
+          width: parsedSvg.width,
+          height: parsedSvg.height
+        });
+      };
+      image.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error(`Could not load ${file.name}.`));
+      };
+      image.src = url;
+    });
+  }
+  function updateIconStatus() {
+    if (!svgAssets.length) {
+      $('iconStatus').textContent = 'No SVGs loaded — fallback shape will be used.';
+      return;
+    }
+    const names = svgAssets.map(asset => asset.name).join(', ');
+    $('iconStatus').textContent = `${svgAssets.length} SVG${svgAssets.length === 1 ? '' : 's'} loaded: ${names}`;
+  }
+  function clearSvgAssets() {
+    for (const asset of svgAssets) {
+      URL.revokeObjectURL(asset.url);
+    }
+    svgAssets = [];
+    updateIconStatus();
+    renderSafely();
+    setStatus('Cleared all SVGs. Cells now draw the chosen fallback shape.');
+  }
+  function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${String(secs).padStart(2, '0')}`;
+  }
+  function updateTimeline() {
+    if (!video.videoWidth || !Number.isFinite(video.duration) || video.duration <= 0) {
+      $('timeLabel').textContent = '0:00 / 0:00';
+      return;
+    }
+    const fraction = video.currentTime / video.duration;
+    $('seek').value = String(Math.round(fraction * 1000));
+    $('timeLabel').textContent = `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
+  }
+  function seekTo(targetSeconds) {
+    return new Promise((resolve, reject) => {
+      const duration = video.duration;
+      const maxTime = Number.isFinite(duration) && duration > 0
+        ? Math.max(0, duration - 0.01)
+        : Math.max(0, targetSeconds);
+      const boundedTarget = clamp(targetSeconds, 0, maxTime);
+      if (!video.seeking && Math.abs(video.currentTime - boundedTarget) < 0.001) {
+        resolve();
+        return;
+      }
+      let timeoutId = null;
+      const handleSeeked = () => {
+        clearTimeout(timeoutId);
+        video.removeEventListener('seeked', handleSeeked);
+        resolve();
+      };
+      video.addEventListener('seeked', handleSeeked);
+      timeoutId = setTimeout(() => {
+        video.removeEventListener('seeked', handleSeeked);
+        reject(new Error('Seeking took too long.'));
+      }, 8000);
+      try {
+        video.currentTime = boundedTarget;
+      } catch (error) {
+        clearTimeout(timeoutId);
+        video.removeEventListener('seeked', handleSeeked);
+        reject(error);
+      }
+    });
+  }
+  function exportSettings() {
+    const fps = clamp(Math.round(Number($('fps').value) || 12), 4, 20);
+    const requestedSeconds = clamp(Number($('duration').value) || 4, 0.5, 15);
+    const frameCount = Math.max(1, Math.ceil(requestedSeconds * fps));
+    return {
+      fps,
+      frameCount,
+      duration: frameCount / fps
+    };
+  }
+  async function captureFrames(onFrame, taskLabel) {
+    if (!video.videoWidth) {
+      throw new Error('Choose a video first.');
+    }
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    const maxDuration = Number.isFinite(video.duration) && video.duration > 0
+      ? video.duration
+      : null;
+    video.pause();
+    try {
+      for (let i = 0; i < settings.frameCount; i++) {
+        const targetTime = maxDuration
+          ? (i / settings.fps) % maxDuration
+          : i / settings.fps;
+        await seekTo(targetTime);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        renderFrame(false);
+        await onFrame(i, {
+          ...settings,
+          width: canvas.width,
+          height: canvas.height
+        });
+        setStatus(`${taskLabel}: rendered frame ${i + 1} of ${settings.frameCount}…`);
+      }
+      return {
+        ...settings,
+        width: canvas.width,
+        height: canvas.height
+      };
+    } finally {
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) {
+        await video.play().catch(() => {});
+      }
+      renderSafely();
+      updateTimeline();
+    }
+  }
+  function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 60000);
+  }
+  function formatNumber(value) {
+    return Number(value.toFixed(6)).toString();
+  }
+  function makeAnimatedSvg(frames, width, height, fps) {
+    const frameCount = frames.length;
+    const totalDuration = frameCount / fps;
+    const totalDurationText = formatNumber(totalDuration);
+    const imageElements = frames.map((dataUrl, index) => {
+      let animationTag = '';
+      if (frameCount > 1) {
+        let valuesAttribute;
+        let keyTimesAttribute;
+        if (index === 0) {
+          valuesAttribute = 'visible;hidden;hidden';
+          keyTimesAttribute = `0;${formatNumber(1 / frameCount)};1`;
+        } else if (index === frameCount - 1) {
+          valuesAttribute = 'hidden;visible;hidden';
+          keyTimesAttribute = `0;${formatNumber(index / frameCount)};1`;
+        } else {
+          valuesAttribute = 'hidden;visible;hidden;hidden';
+          keyTimesAttribute = `0;${formatNumber(index / frameCount)};${formatNumber((index + 1) / frameCount)};1`;
+        }
+        animationTag = `<animate attributeName="visibility" calcMode="discrete" values="${valuesAttribute}" keyTimes="${keyTimesAttribute}" dur="${totalDurationText}s" repeatCount="indefinite"/>`;
+      }
+      const initialVisibility = index === 0 ? 'visible' : 'hidden';
+      return `<image x="0" y="0" width="${width}" height="${height}" visibility="${initialVisibility}" href="${dataUrl}" xlink:href="${dataUrl}">${animationTag}</image>`;
+    }).join('\n');
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+${imageElements}
+</svg>`;
+  }
+  $('uploadVideoBtn').addEventListener('click', () => $('videoInput').click());
+  $('addSvgBtn').addEventListener('click', () => $('svgInput').click());
+  $('videoInput').addEventListener('change', event => {
+    const file = event.target.files && event.target.files[0];
+    if (!file) return;
+    video.pause();
+    if (videoUrl) {
+      URL.revokeObjectURL(videoUrl);
+    }
+    videoUrl = URL.createObjectURL(file);
+    video.src = videoUrl;
+    video.loop = true;
+    video.muted = true;
+    video.load();
+    $('placeholder').style.display = 'flex';
+    setStatus(`Loading video: ${file.name}…`);
+    event.target.value = '';
+  });
+  video.addEventListener('loadedmetadata', () => {
+    resizeCanvasForVideo();
+    $('placeholder').style.display = 'none';
+    updateTimeline();
+    renderSafely();
+    syncActionButtons();
+    setStatus(`Loaded video (${video.videoWidth} × ${video.videoHeight}px). Ready.`);
+    video.play().catch(() => {
+      setStatus('Video ready. Press Play to start preview playback.');
+    });
+  });
+  video.addEventListener('loadeddata', renderSafely);
+  video.addEventListener('seeked', () => {
+    renderSafely();
+    updateTimeline();
+  });
+  video.addEventListener('timeupdate', updateTimeline);
+  video.addEventListener('play', () => {
+    $('playPause').textContent = 'Pause';
+    $('timelinePlay').textContent = '⏸';
+  });
+  video.addEventListener('pause', () => {
+    $('playPause').textContent = 'Play';
+    $('timelinePlay').textContent = '▶';
+    renderSafely();
+  });
+  $('svgInput').addEventListener('change', async event => {
+    const files = [...(event.target.files || [])];
+    event.target.value = '';
+    let added = 0;
+    for (const file of files) {
+      if (!file.name.toLowerCase().endsWith('.svg') && file.type !== 'image/svg+xml') {
+        continue;
+      }
+      try {
+        const parsed = sanitizeSvg(await file.text());
+        const asset = await loadSvgImage(file, parsed);
+        svgAssets.push(asset);
+        added++;
+      } catch (error) {
+        console.warn(error);
+        setStatus(error.message);
+      }
+    }
+    updateIconStatus();
+    renderSafely();
+    if (added) {
+      setStatus(`Added ${added} SVG${added === 1 ? '' : 's'}. All loaded SVGs cycle across the cells.`);
+    }
+  });
+  $('clearSvgBtn').addEventListener('click', clearSvgAssets);
+  function togglePlayback() {
+    if (!video.videoWidth) return;
+    if (video.paused) {
+      video.play().catch(() => setStatus('The video could not be played.'));
+    } else {
+      video.pause();
+    }
+  }
+  $('playPause').addEventListener('click', togglePlayback);
+  $('timelinePlay').addEventListener('click', togglePlayback);
+  $('seek').addEventListener('input', event => {
+    if (!video.videoWidth || !Number.isFinite(video.duration)) return;
+    video.pause();
+    const fraction = Number(event.target.value) / 1000;
+    video.currentTime = fraction * video.duration;
+  });
+  const renderControlIds = [
+    'cellSize', 'scale', 'gap', 'contrast', 'sizeMode',
+    'backgroundMode', 'cutoff', 'fallbackShape', 'colorMode', 'customColor',
+    'rotate', 'transparent', 'bgColor', 'outputWidth',
+    'brightness', 'saturation', 'tintColor', 'tintOpacity'
+  ];
+  for (const id of renderControlIds) {
+    const el = $(id);
+    if (!el) continue;
+    el.addEventListener('input', () => {
+      updateLabels();
+      renderSafely();
+    });
+    el.addEventListener('change', () => {
+      updateLabels();
+      renderSafely();
+    });
+  }
+  $('colorMode').addEventListener('change', e => {
+    $('customColorContainer').style.display = e.target.value === 'custom' ? 'block' : 'none';
+  });
+  $('saveFrame').addEventListener('click', async () => {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+    if (!blob) {
+      setStatus('Could not create the PNG.');
+      return;
+    }
+    downloadBlob(blob, `brain-motion-${Date.now()}.png`);
+    setStatus('Saved the current frame as a transparent PNG.');
+  });
+  $('exportSvg').addEventListener('click', async () => {
+    setBusy(true);
+    setStatus('Preparing animated SVG frames…');
+    try {
+      const frames = [];
+      const meta = await captureFrames(async () => {
+        frames.push(canvas.toDataURL('image/png'));
+      }, 'SVG');
+      const svg = makeAnimatedSvg(frames, meta.width, meta.height, meta.fps);
+      downloadBlob(
+        new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }),
+        `brain-motion-${Date.now()}.svg`
+      );
+      setStatus('Saved animated SVG. It embeds transparent PNG frames inside an SVG animation.');
+    } catch (error) {
+      setStatus(`SVG export failed: ${error.message}`);
+    } finally {
+      setBusy(false);
+    }
+  });
+  async function fetchGifWorker() {
+    const url = 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js';
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error('Could not download the GIF encoder worker. Run this page from localhost and check your internet connection.');
+    }
+    const workerSource = await response.text();
+    return URL.createObjectURL(
+      new Blob([workerSource], { type: 'application/javascript' })
+    );
+  }
+  $('exportGif').addEventListener('click', async () => {
+    if (!window.GIF) {
+      setStatus('GIF encoder did not load. Check your internet connection and reload the page.');
+      return;
+    }
+    setBusy(true);
+    let workerUrl = null;
+    try {
+      setStatus('Loading GIF encoder…');
+      workerUrl = await fetchGifWorker();
+      const options = {
+        workers: 2,
+        quality: 10,
+        repeat: 0,
+        width: canvas.width,
+        height: canvas.height,
+        workerScript: workerUrl
+      };
+      const usesTransparency = $('transparent').checked;
+      const transparentKey = 0xff00ff;
+      if (usesTransparency) options.transparent = transparentKey;
+      const gif = new window.GIF(options);
+      const gifCanvas = document.createElement('canvas');
+      gifCanvas.width = canvas.width;
+      gifCanvas.height = canvas.height;
+      const gifCtx = gifCanvas.getContext('2d', { willReadFrequently: true });
+      const finished = new Promise((resolve, reject) => {
+        gif.on('finished', resolve);
+        gif.on('error', reject);
+        gif.on('progress', progress => {
+          setStatus(`Encoding GIF: ${Math.round(progress * 100)}%…`);
+        });
+      });
+      await captureFrames(async (index, meta) => {
+        const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = frame.data;
+        for (let i = 0; i < data.length; i += 4) {
+          if (usesTransparency && data[i + 3] < 128) {
+            data[i] = 255;
+            data[i + 1] = 0;
+            data[i + 2] = 255;
+            data[i + 3] = 255;
+          } else {
+            data[i + 3] = 255;
+            // Keep actual magenta artwork from matching the transparent key.
+            if (usesTransparency && data[i] === 255 && data[i + 1] === 0 && data[i + 2] === 255) {
+              data[i + 1] = 1;
+            }
+          }
+        }
+        gifCtx.putImageData(frame, 0, 0);
+        gif.addFrame(gifCanvas, {
+          copy: true,
+          delay: Math.max(20, Math.round(1000 / meta.fps))
+        });
+        setStatus(`GIF: preparing frame ${index + 1} of ${meta.frameCount}…`);
+      }, 'GIF');
+      setStatus('Encoding GIF…');
+      gif.render();
+      const blob = await finished;
+      downloadBlob(blob, `brain-motion-${Date.now()}.gif`);
+      setStatus('Saved GIF. GIF transparency is limited to transparent/opaque pixels.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`GIF export failed: ${error.message || 'Check that the page is served from localhost.'}`);
+    } finally {
+      if (workerUrl) URL.revokeObjectURL(workerUrl);
+      setBusy(false);
+    }
+  });
+  async function exportRecordedVideo(kind) {
+    if (!video.videoWidth) {
+      setStatus('Choose a video first.');
+      return;
+    }
+    if (!window.MediaRecorder || !canvas.captureStream) {
+      setStatus('This browser does not support canvas video recording. Try a current version of Chrome or Edge.');
+      return;
+    }
+    const mimeCandidates = kind === 'mp4'
+      ? ['video/mp4;codecs=avc1.42E01E', 'video/mp4;codecs=avc1', 'video/mp4']
+      : ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'];
+    const mimeType = mimeCandidates.find(type => MediaRecorder.isTypeSupported(type));
+    if (!mimeType) {
+      setStatus(kind === 'mp4'
+        ? 'MP4 recording is not supported by this browser. MP4 support is browser-dependent; use WebM instead.'
+        : 'WebM recording is not supported by this browser.');
+      return;
+    }
+    setBusy(true);
+    const settings = exportSettings();
+    const wasPlaying = !video.paused;
+    const previousTime = video.currentTime;
+    let stream = null;
+    let recorder = null;
+    try {
+      video.pause();
+      await seekTo(0);
+      recordingOpaque = kind === 'mp4';
+      renderFrame(recordingOpaque);
+      stream = canvas.captureStream(settings.fps);
+      recorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: 5_000_000
+      });
+      const chunks = [];
+      const recordingFinished = new Promise((resolve, reject) => {
+        recorder.addEventListener('dataavailable', event => {
+          if (event.data && event.data.size) chunks.push(event.data);
+        });
+        recorder.addEventListener('stop', () => {
+          resolve(new Blob(chunks, { type: recorder.mimeType || mimeType }));
+        });
+        recorder.addEventListener('error', event => {
+          reject(event.error || new Error('Video recording failed.'));
+        });
+      });
+      recorder.start(200);
+      await video.play();
+      setStatus(`Recording ${kind.toUpperCase()} for ${settings.duration.toFixed(1)} seconds…`);
+      await new Promise(resolve => setTimeout(resolve, settings.duration * 1000));
+      video.pause();
+      if (recorder.state !== 'inactive') recorder.stop();
+      const blob = await recordingFinished;
+      const extension = kind === 'mp4' ? 'mp4' : 'webm';
+      downloadBlob(blob, `brain-motion-${Date.now()}.${extension}`);
+      setStatus(kind === 'mp4'
+        ? 'Saved MP4 with an opaque background. MP4 does not support transparency.'
+        : 'Saved WebM. Transparent alpha depends on browser and codec support.');
+    } catch (error) {
+      console.error(error);
+      setStatus(`Video export failed: ${error.message}`);
+    } finally {
+      recordingOpaque = false;
+      if (recorder && recorder.state !== 'inactive') {
+        try { recorder.stop(); } catch (_) {}
+      }
+      if (stream) stream.getTracks().forEach(track => track.stop());
+      try {
+        await seekTo(previousTime);
+      } catch (_) {}
+      if (wasPlaying) await video.play().catch(() => {});
+      renderSafely();
+      setBusy(false);
+    }
+  }
+  $('exportWebm').addEventListener('click', () => exportRecordedVideo('webm'));
+  $('exportMp4').addEventListener('click', () => exportRecordedVideo('mp4'));
+  function previewLoop() {
+    if (video.videoWidth &&
+        !video.paused &&
+        video.readyState >= 2 &&
+        video.currentTime !== lastRenderedTime) {
+      renderSafely();
+    }
+    requestAnimationFrame(previewLoop);
+  }
+  updateLabels();
+  updateIconStatus();
+  syncActionButtons();
+  requestAnimationFrame(previewLoop);
+})();
+</script>
+</body>
+</html>

assests/html_sample/ping_pong.html ADDED Viewed

File without changes

assests/illustration/COT_Chain_Of_thought_example.png ADDED Viewed

assests/illustration/agent_working_story.jpg ADDED Viewed

Git LFS Details

SHA256: 876c4b0374b4a9aceee37fda0a058acd48dca8ce9758eee908c867ca08390f3c
Pointer size: 131 Bytes
Size of remote file: 287 kB

assests/illustration/anthropic-light.svg ADDED Viewed

assests/illustration/docling.svg ADDED Viewed

assests/illustration/huggingface-color.svg ADDED Viewed

assests/illustration/langchain (1).webp ADDED Viewed

assests/illustration/langchain-color.svg ADDED Viewed

assests/illustration/llamaindex-color.svg ADDED Viewed

assests/illustration/rag_indexing.avif ADDED Viewed

assests/illustration/rag_retrieval_generation.avif ADDED Viewed

assests/illustration/smolagent.webp ADDED Viewed

assests/illustration/unstructured-color.svg ADDED Viewed

assests/learning reference/2 blue 3 brown.jpg ADDED Viewed

assests/learning reference/5 minutes engineering.jpg ADDED Viewed

assests/learning reference/analytics_india_magazine_logo.jpg ADDED Viewed

assests/learning reference/arenaai_logo.jpg ADDED Viewed

assests/learning reference/campusx.jpg ADDED Viewed

assests/learning reference/codewithharry.jpg ADDED Viewed

assests/learning reference/evolving_ai_logo.jpg ADDED Viewed

assests/learning reference/graduate_ml.jpg ADDED Viewed

assests/learning reference/krish_naik.jpg ADDED Viewed

assests/learning reference/nptel.jpg ADDED Viewed

assests/learning reference/varun mayya.jpg ADDED Viewed

assests/linkedin bg (4).png ADDED Viewed

Git LFS Details

SHA256: cf05862ac06d23326ebee8067aa66e71c9762fc1fce2a0d72163ca079a245c42
Pointer size: 131 Bytes
Size of remote file: 506 kB

assests/linkedin-profile-card.html ADDED Viewed

	@@ -0,0 +1,166 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LinkedIn Dynamic Profile Card</title>
+<style>
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; background: #0f1317; color: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px 12px;
+  }
+  /* Live image controls */
+  .controls { width: 100%; max-width: 485px; display: grid; gap: 10px; }
+  .field { display: grid; gap: 4px; font-size: 13px; color: #99A3BA; }
+  .row { display: flex; gap: 8px; }
+  .controls input[type=url] {
+    flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid #2A323D;
+    background: #181E24; color: #fff; font: inherit; font-size: 14px;
+  }
+  .controls input:focus-visible { outline: 2px solid #5CE1E6; outline-offset: 1px; }
+  .upload {
+    flex: none; display: flex; align-items: center; padding: 0 14px; border-radius: 8px; cursor: pointer;
+    background: #5CE1E6; color: #0A2540; font-size: 14px; font-weight: 600;
+  }
+  .upload:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
+  .upload input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
+  /* Card wrapper */
+  .card-wrap { padding: 0; max-width: 100%; }
+  .card {
+    position: relative; width: 420px; max-width: 100%; overflow: visible;
+    background: #181E24; border: 1px solid #2A323D; border-radius: 20px;
+    color: #fff;
+  }
+  .banner {
+    position: relative; height: 150px; background: #232A32;
+    border-radius: 20px 20px 0 0; overflow: hidden;
+    display: flex; align-items: flex-start; justify-content: flex-start;
+  }
+  .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: none; }
+  /* Sits to the right of the avatar so the two never overlap */
+  .banner-placeholder { padding: 16px 20px 0 176px; font-size: 13px; line-height: 1.4; color: #99A3BA; }
+  .avatar {
+    width: 140px; height: 140px; border-radius: 50%; border: 4px solid #181E24; box-shadow: none;
+    margin: -70px 0 0 20px; position: relative; background: #2A323D; overflow: hidden;
+    display: flex; align-items: center; justify-content: center; font-size: 12px; color: #99A3BA; text-align: center;
+  }
+  .avatar-img { width: 100%; height: 100%; object-fit: cover; display: none; }
+  .content { padding: 16px 20px 24px; }
+  .name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; font-weight: bold; line-height: 1.2; }
+  .name svg { flex: none; }
+  .headline { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: #D0D5DD; }
+  .location { margin: 8px 0 0; font-size: 15px; color: #99A3BA; }
+  .company { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
+  .company-logo-box {
+    flex: none; width: 54px; height: 54px; border-radius: 8px; background: #fff; overflow: hidden;
+    display: flex; align-items: center; justify-content: center; text-align: center;
+    font-size: 8px; line-height: 1.1; color: #555; padding: 2px;
+  }
+  .company-logo { width: 100%; height: 100%; object-fit: contain; display: none; }
+  .company-name { font-size: 18px; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class="controls" aria-label="Live image controls">
+  <div class="field">Banner Image URL
+    <div class="row">
+      <input id="bannerUrl" type="url" placeholder="https://…" aria-label="Banner Image URL">
+      <label class="upload">Upload<input id="bannerFile" type="file" accept="image/*"></label>
+    </div>
+  </div>
+  <div class="field">Profile Image URL
+    <div class="row">
+      <input id="profileUrl" type="url" placeholder="https://…" aria-label="Profile Image URL">
+      <label class="upload">Upload<input id="profileFile" type="file" accept="image/*"></label>
+    </div>
+  </div>
+  <div class="field">Company Logo URL
+    <div class="row">
+      <input id="companyUrl" type="url" placeholder="https://…" aria-label="Company Logo URL">
+      <label class="upload">Upload<input id="companyFile" type="file" accept="image/*"></label>
+    </div>
+  </div>
+</div>
+<div class="card-wrap">
+  <article class="card">
+    <div class="banner">
+      <img class="banner-img" alt="Banner">
+      <span class="banner-placeholder">Click top control panel to paste Banner Image URL</span>
+    </div>
+    <div class="avatar">
+      <img class="avatar-img" alt="Dev Patel">
+      <span class="avatar-placeholder">Profile image</span>
+    </div>
+    <div class="content">
+      <h1 class="name">Dev Patel
+        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#C5CBD6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-label="Verified">
+          <path d="M12 2.5l7.5 2.8v6c0 4.6-3.1 8.2-7.5 10.2-4.4-2-7.5-5.6-7.5-10.2v-6L12 2.5z"/>
+          <path d="M8.5 12.2l2.5 2.5 4.6-4.9"/>
+        </svg>
+      </h1>
+      <p class="headline">AI/ML Engineer @Codewinglet || Building Next-Gen AI Solutions ...</p>
+      <p class="location">Bardoli, Gujarat</p>
+      <div class="company">
+        <div class="company-logo-box">
+          <img class="company-logo" alt="Codewinglet logo">
+          <span class="logo-placeholder">Upload/paste custom logo URL</span>
+        </div>
+        <span class="company-name">Codewinglet Private Limited</span>
+      </div>
+    </div>
+  </article>
+</div>
+<script>
+  // Live image bindings: URL field + file upload -> image, with placeholder fallback
+  const bindings = [
+    { url: 'bannerUrl',  file: 'bannerFile',  img: '.banner-img',   ph: '.banner-placeholder' },
+    { url: 'profileUrl', file: 'profileFile', img: '.avatar-img',   ph: '.avatar-placeholder' },
+    { url: 'companyUrl', file: 'companyFile', img: '.company-logo', ph: '.logo-placeholder' }
+  ];
+  bindings.forEach(({ url, file, img, ph }) => {
+    const urlField = document.getElementById(url);
+    const fileField = document.getElementById(file);
+    const image = document.querySelector(img);
+    const placeholder = document.querySelector(ph);
+    const showPlaceholder = () => { image.style.display = 'none'; placeholder.style.display = ''; };
+    image.addEventListener('load',  () => { image.style.display = 'block'; placeholder.style.display = 'none'; });
+    image.addEventListener('error', showPlaceholder);
+    urlField.addEventListener('input', () => {
+      fileField.value = '';
+      const v = urlField.value.trim();
+      if (!v) { image.removeAttribute('src'); showPlaceholder(); return; }
+      image.src = v;
+    });
+    fileField.addEventListener('change', () => {
+      const f = fileField.files[0];
+      if (!f) return;
+      urlField.value = '';
+      const reader = new FileReader();
+      reader.onload = () => { image.src = reader.result; };
+      reader.readAsDataURL(f);
+    });
+  });
+</script>
+</body>
+</html>

assests/logos set whites/anthropic (1).svg ADDED Viewed

assests/logos set whites/antigravity-color.svg ADDED Viewed

assests/logos set whites/claude-color.svg ADDED Viewed

assests/logos set whites/codex-color (1).svg ADDED Viewed

assests/logos set whites/deepseek-color.svg ADDED Viewed

assests/logos set whites/gemini-color (1).svg ADDED Viewed

assests/logos set whites/grok.svg ADDED Viewed

assests/logos set whites/huggingface-color.svg ADDED Viewed

assests/logos set whites/kimi-color.svg ADDED Viewed