skill

Movie Maker

Unreviewed

by Kyle Bergstedt

Record narrated walkthroughs of your Gallia project with screen + mic capture, silence detection, smart playback that skips dead air, timeline markers, and a full video library with thumbnails.

Overview Files Versions Dependencies Discussions Activity
movie-maker / demo-recording.html
Raw 
<!DOCTYPE html>
<html lang="en">
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Maker — Recording Active</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0d1117; color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
.tab-bar {
  display: flex; border-bottom: 1px solid #21262d; background: #161b22; flex-shrink: 0;
}
.tab-bar button {
  padding: 10px 24px; background: none; border: none; color: #8b949e;
  font-size: 13px; font-weight: 500; cursor: pointer; position: relative;
  font-family: inherit;
}
.tab-bar button.active { color: #e6edf3; }
.tab-bar button.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: #00b8b0; border-radius: 1px 1px 0 0;
}
.record-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 16px; padding: 24px;
}
.rec-indicator { display: flex; align-items: center; gap: 12px; }
.rec-dot {
  width: 14px; height: 14px; border-radius: 50%; background: #f85149;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.rec-label { font-size: 16px; font-weight: 600; color: #f85149; letter-spacing: 1px; }
.rec-timer {
  font-size: 32px; font-weight: 700; color: #e6edf3;
  font-variant-numeric: tabular-nums;
}
.level-meter {
  width: 240px; height: 6px; background: #21262d; border-radius: 3px; overflow: hidden;
}
.level-meter-fill {
  height: 100%; width: 0%; background: #3fb950; border-radius: 3px;
  transition: width 0.05s linear;
}
.level-meter-fill.hot { background: #f85149; }
.mic-label { color: #484f58; font-size: 11px; }
.rec-hint { color: #484f58; font-size: 12px; text-align: center; line-height: 1.5; max-width: 320px; }
.btn-row { display: flex; gap: 10px; align-items: center; }
.btn-pause {
  background: #21262d; color: #d29922; border: 1px solid #30363d;
  padding: 10px 28px; border-radius: 6px; font-size: 14px; font-family: inherit;
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.btn-stop {
  background: #21262d; color: #f85149; border: 1px solid #f85149;
  padding: 10px 28px; border-radius: 6px; font-size: 14px; font-family: inherit;
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.toolbar-sim {
  position: fixed; top: 0; left: 0; right: 0; height: 32px;
  background: #161b22; border-bottom: 1px solid #21262d;
  display: flex; align-items: center; padding: 0 12px; gap: 12px; z-index: 10;
}
.toolbar-sim .nav-btn {
  background: none; border: none; color: #8b949e; cursor: pointer;
  padding: 4px 8px; font-size: 12px;
}
.toolbar-sim .rec-btn {
  color: #f85149; position: relative; background: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; cursor: pointer;
}
.toolbar-sim .mini-dot {
  width: 6px; height: 6px; background: #f85149; border-radius: 50%;
  position: absolute; top: 0; right: 0;
  animation: recPulse 1s ease-in-out infinite;
}
.toolbar-sim .timer {
  font-size: 11px; color: #f85149; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spacer { flex: 1; }
.demo-note {
  position: fixed; bottom: 8px; right: 12px; color: #484f58; font-size: 10px;
}
</style>
</head>
<body>
<div class="toolbar-sim">
  <span style="color:#8b949e;font-size:12px;">GV2</span>
  <span class="spacer"></span>
  <button class="nav-btn">&#9776;</button>
  <button class="nav-btn" title="Camera">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
  </button>
  <button class="rec-btn" title="Stop Recording (Alt+R)">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/></svg>
    <span class="mini-dot"></span>
  </button>
  <span class="timer" id="toolbar-timer">01:23</span>
</div>

<div style="margin-top: 32px; flex: 1; display: flex; flex-direction: column;">
  <div class="tab-bar">
    <button class="active">Record</button>
    <button>Library</button>
    <button>Scripts</button>
  </div>
  <div class="record-view">
    <div class="rec-indicator">
      <div class="rec-dot"></div>
      <span class="rec-label">RECORDING</span>
    </div>
    <div class="rec-timer" id="main-timer">01:23</div>
    <div class="level-meter">
      <div class="level-meter-fill" id="level-fill"></div>
    </div>
    <div class="mic-label">Microphone active</div>
    <div class="btn-row">
      <button class="btn-pause">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
        Pause
      </button>
      <button class="btn-stop">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
        Stop
      </button>
    </div>
    <div class="rec-hint">Recording from toolbar — navigate to any view.<br>Click the toolbar record button or Stop here to finish.</div>
  </div>
</div>
<div class="demo-note">Demo — simulated data</div>
<script>
// Animate timer
let seconds = 83;
function fmtTimer(s) {
  const m = Math.floor(s / 60);
  const sec = s % 60;
  return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
}
setInterval(() => {
  seconds++;
  document.getElementById('main-timer').textContent = fmtTimer(seconds);
  document.getElementById('toolbar-timer').textContent = fmtTimer(seconds);
}, 1000);

// Animate level meter
const fill = document.getElementById('level-fill');
setInterval(() => {
  const level = Math.random() * 80 + 5;
  fill.style.width = level + '%';
  fill.classList.toggle('hot', level > 70);
}, 100);
</script>
</body>
</html>