diff --git a/at/user-page.html b/at/user-page.html
index cec700e11e..ae8f5cb5c8 100644
--- a/at/user-page.html
+++ b/at/user-page.html
@@ -375,6 +375,65 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
       to { transform: scale(1); opacity: 1; }
     }
 
+    /* Preview box scrolling animation */
+    .source-preview {
+      position: relative;
+      max-height: 120px;
+      overflow: hidden;
+      background: linear-gradient(135deg, rgba(205, 92, 155, 0.05), rgba(100, 180, 255, 0.05));
+      border: 1px solid rgba(205, 92, 155, 0.2);
+    }
+    
+    .source-preview:hover .preview-scroll-container {
+      animation-play-state: paused !important;
+    }
+    
+    .preview-scroll-container {
+      display: flex;
+      animation: previewScrollLoop 40s linear infinite;
+      will-change: transform;
+    }
+    
+    .line-numbers {
+      flex-shrink: 0;
+      width: 3em;
+      text-align: right;
+      padding-right: 0.5em;
+      user-select: none;
+      font-size: 0.9em;
+      line-height: inherit;
+      background: rgba(0, 0, 0, 0.1);
+      border-right: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    
+    .line-numbers div {
+      padding: 0.1em 0;
+    }
+    
+    /* Striped color palette for line numbers */
+    .line-numbers div:nth-child(6n+1) { color: rgb(205, 92, 155); opacity: 0.8; }
+    .line-numbers div:nth-child(6n+2) { color: rgb(255, 120, 100); opacity: 0.8; }
+    .line-numbers div:nth-child(6n+3) { color: rgb(255, 200, 100); opacity: 0.8; }
+    .line-numbers div:nth-child(6n+4) { color: rgb(150, 230, 150); opacity: 0.8; }
+    .line-numbers div:nth-child(6n+5) { color: rgb(100, 180, 255); opacity: 0.8; }
+    .line-numbers div:nth-child(6n+6) { color: rgb(180, 130, 230); opacity: 0.8; }
+    
+    .preview-content {
+      display: block;
+      flex: 1;
+      padding-left: 0.5em;
+    }
+    
+    /* Infinite scroll - content is duplicated so it wraps seamlessly */
+    @keyframes previewScrollLoop {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-50%);
+      }
+    }
+
     .empty-state {
       text-align: center;
       padding: 2em 1em;
@@ -684,29 +743,45 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
         'red': '#ff0000',
         'darkred': '#8b0000',
         'orange': '#ff6600',
-        'yellow': isDark ? '#ffff00' : '#d4a000', // Darker yellow for light mode
-        'lime': isDark ? '#00ff00' : '#00a000', // Darker lime for light mode
+        'yellow': isDark ? '#ffff00' : '#d4a000',
+        'lime': isDark ? '#00ff00' : '#00a000',
         'limegreen': '#32cd32',
         'green': '#008000',
-        'cyan': isDark ? '#00ffff' : '#008b8b', // Darker cyan for light mode
+        'cyan': isDark ? '#00ffff' : '#008b8b',
         'blue': '#0000ff',
         'purple': '#800080',
         'magenta': '#ff00ff',
         'hotpink': '#ff69b4',
-        'white': isDark ? '#ffffff' : '#333333', // Dark gray for light mode
-        'black': isDark ? '#000000' : '#ffffff', // Invert for light mode
+        'white': isDark ? '#ffffff' : '#333333',
+        'black': isDark ? '#000000' : '#ffffff',
         'gray': '#808080',
         'grey': '#808080',
         'mediumseagreen': '#3cb371',
         'pink': '#ffc0cb',
         'brown': '#a52a2a',
         'violet': '#ee82ee',
-        '192,192,192': isDark ? 'rgb(192,192,192)' : 'rgb(100,100,100)' // Gray values
+        'teal': '#008080',
+        'navy': '#000080',
+        'maroon': '#800000',
+        'olive': '#808000',
+        'silver': '#c0c0c0'
       };
       
       const result = [];
       let i = 0;
-      let currentColor = isDark ? '#ffffff' : '#333333'; // Default color based on theme
+      let currentColor = isDark ? '#ffffff' : '#333333';
+      let textBuffer = '';
+      
+      function flushBuffer() {
+        if (textBuffer) {
+          const escaped = textBuffer
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+          result.push(`<span style="color: ${currentColor}">${escaped}</span>`);
+          textBuffer = '';
+        }
+      }
       
       while (i < coloredString.length) {
         if (coloredString[i] === '\\' && i + 1 < coloredString.length) {
@@ -716,33 +791,34 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
             j++;
           }
           if (j < coloredString.length) {
-            const colorName = coloredString.substring(i + 1, j);
-            // Check if it's a color code
-            if (colorMap[colorName.toLowerCase()]) {
-              currentColor = colorMap[colorName.toLowerCase()];
-            } else if (/^\d+,\d+,\d+(,\d+)?$/.test(colorName)) {
-              // RGB or RGBA value like "255,20,147" or "255,255,255,0"
-              currentColor = `rgb(${colorName})`;
+            const colorCode = coloredString.substring(i + 1, j);
+            
+            // Flush any buffered text before changing color
+            flushBuffer();
+            
+            // Parse the color code
+            if (colorMap[colorCode.toLowerCase()]) {
+              currentColor = colorMap[colorCode.toLowerCase()];
+            } else if (/^\d+,\d+,\d+(,[\d.]+)?$/.test(colorCode)) {
+              // RGB or RGBA value like "255,20,147" or "255,255,255,0.5"
+              currentColor = `rgb(${colorCode})`;
+            } else {
+              // Unknown color code - try as CSS color name
+              currentColor = colorCode;
             }
             i = j + 1;
             continue;
           }
         }
         
-        // Regular character - add with current color
-        const char = coloredString[i];
-        if (char === '<') {
-          result.push(`<span style="color: ${currentColor}">&lt;</span>`);
-        } else if (char === '>') {
-          result.push(`<span style="color: ${currentColor}">&gt;</span>`);
-        } else if (char === '&') {
-          result.push(`<span style="color: ${currentColor}">&amp;</span>`);
-        } else {
-          result.push(`<span style="color: ${currentColor}">${char}</span>`);
-        }
+        // Regular character - add to buffer
+        textBuffer += coloredString[i];
         i++;
       }
       
+      // Flush any remaining text
+      flushBuffer();
+      
       return result.join('');
     }
     
@@ -776,8 +852,11 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
         if (module && module.KidLisp) {
           // Create a kidlisp instance for syntax highlighting
           const kid = new module.KidLisp();
-          kid.syntaxHighlightSource = source;
+          kid.initializeSyntaxHighlighting(source);
           const coloredString = kid.buildColoredKidlispString();
+          
+          console.log('🎨 KidLisp colored string sample:', coloredString.substring(0, 100));
+          
           const result = parseColoredKidlisp(coloredString);
           
           // Cache the result
@@ -884,32 +963,209 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
         });
     }
 
-    function openSourceModal(uri, source, slug) {
-      // Create a formatted HTML view of the source code
+    // Simple JavaScript syntax highlighter
+    function highlightJavaScript(code) {
+      // Escape HTML first
+      const escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      
+      // Parse and highlight in order of precedence to avoid conflicts
+      let result = '';
+      let i = 0;
+      
+      while (i < escaped.length) {
+        let matched = false;
+        
+        // Multi-line comments
+        if (escaped.substr(i, 2) === '/*') {
+          let end = escaped.indexOf('*/', i + 2);
+          if (end === -1) end = escaped.length;
+          else end += 2;
+          result += '<span style="color: rgb(120, 120, 120);">' + escaped.substring(i, end) + '</span>';
+          i = end;
+          continue;
+        }
+        
+        // Single-line comments
+        if (escaped.substr(i, 2) === '//') {
+          let end = escaped.indexOf('\n', i);
+          if (end === -1) end = escaped.length;
+          else end += 1;
+          result += '<span style="color: rgb(120, 120, 120);">' + escaped.substring(i, end) + '</span>';
+          i = end;
+          continue;
+        }
+        
+        // Strings
+        if (escaped[i] === '"' || escaped[i] === "'" || escaped[i] === '`') {
+          const quote = escaped[i];
+          let end = i + 1;
+          while (end < escaped.length && escaped[end] !== quote) {
+            if (escaped[end] === '\\') end += 2;
+            else end++;
+          }
+          end++; // Include closing quote
+          result += '<span style="color: rgb(150, 255, 150);">' + escaped.substring(i, end) + '</span>';
+          i = end;
+          continue;
+        }
+        
+        // Numbers
+        if (/\d/.test(escaped[i])) {
+          let end = i;
+          while (end < escaped.length && /[\d.]/.test(escaped[end])) end++;
+          result += '<span style="color: rgb(255, 200, 100);">' + escaped.substring(i, end) + '</span>';
+          i = end;
+          continue;
+        }
+        
+        // Keywords and identifiers
+        if (/[a-zA-Z_$]/.test(escaped[i])) {
+          let end = i;
+          while (end < escaped.length && /[a-zA-Z0-9_$]/.test(escaped[end])) end++;
+          const word = escaped.substring(i, end);
+          
+          const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'async', 'await', 'class', 'extends', 'import', 'export', 'from', 'default', 'new', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof', 'delete', 'in', 'of', 'void', 'yield', 'static', 'get', 'set', 'super', 'this'];
+          
+          if (keywords.includes(word)) {
+            result += '<span style="color: rgb(100, 150, 255);">' + word + '</span>';
+          } else {
+            // Check if it's a function call (followed by opening paren)
+            let j = end;
+            while (j < escaped.length && /\s/.test(escaped[j])) j++;
+            if (escaped[j] === '(') {
+              result += '<span style="color: rgb(255, 220, 100);">' + word + '</span>';
+            } else {
+              result += word;
+            }
+          }
+          i = end;
+          continue;
+        }
+        
+        // Default: just add the character
+        result += escaped[i];
+        i++;
+      }
+      
+      return result;
+    }
+
+    // KidLisp syntax highlighter - simple fallback
+    function highlightKidLispSimple(code) {
+      // Escape HTML first
+      code = code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      
+      // Comments (semicolons)
+      code = code.replace(/(;.*$)/gm, 
+        '<span style="color: rgb(120, 120, 120);">$1</span>');
+      
+      // Strings
+      code = code.replace(/("(?:\\.|[^"\\])*")/g, 
+        '<span style="color: rgb(150, 255, 150);">$1</span>');
+      
+      // Numbers
+      code = code.replace(/\b(-?\d+\.?\d*)\b/g, 
+        '<span style="color: rgb(255, 200, 100);">$1</span>');
+      
+      // Common KidLisp forms/functions (after opening paren)
+      code = code.replace(/\(([a-zA-Z_][a-zA-Z0-9_-]*)/g, 
+        '(<span style="color: rgb(147, 51, 234);">$1</span>');
+      
+      // Parentheses
+      code = code.replace(/([()])/g, 
+        '<span style="color: rgb(200, 200, 200);">$1</span>');
+      
+      return code;
+    }
+
+    async function openSourceModal(uri, source, slug) {
+      // Detect file type from slug
+      const isJavaScript = slug && slug.endsWith('.mjs');
+      const isKidLisp = slug && slug.endsWith('.lisp');
+      
+      // Apply syntax highlighting
+      let highlightedSource;
+      if (isJavaScript) {
+        highlightedSource = highlightJavaScript(source);
+      } else if (isKidLisp) {
+        // Use the proper KidLisp highlighter with color codes
+        highlightedSource = await highlightKidlisp(source);
+        if (!highlightedSource || highlightedSource.trim() === '') {
+          // Fallback to simple highlighter if the full one fails
+          highlightedSource = highlightKidLispSimple(source);
+        }
+      } else {
+        highlightedSource = source.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      }
+      
+      // Create a formatted HTML view of the source code with animated scrolling
       const htmlContent = `
         <!DOCTYPE html>
         <html>
         <head>
           <style>
+            * {
+              box-sizing: border-box;
+            }
             body {
               margin: 0;
-              padding: 2em;
+              padding: 0;
               background: black;
               color: rgb(200, 200, 200);
               font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
               font-size: 11px;
               line-height: 1.4;
+              overflow: hidden;
+              height: 100vh;
+              display: flex;
+              flex-direction: column;
+            }
+            .header {
+              padding: 1.5em 2em;
+              background: rgba(0, 0, 0, 0.8);
+              border-bottom: 1px solid rgb(205, 92, 155);
+              flex-shrink: 0;
             }
             h1 {
               color: rgb(205, 92, 155);
               font-size: 1.2em;
-              margin-bottom: 0.8em;
+              margin: 0 0 0.5em 0;
               font-weight: normal;
             }
-            pre {
-              margin: 0;
-              white-space: pre-wrap;
-              word-break: break-word;
+            .controls {
+              display: flex;
+              gap: 1em;
+              align-items: center;
+              margin-top: 0.8em;
+            }
+            button {
+              background: rgba(205, 92, 155, 0.2);
+              border: 1px solid rgb(205, 92, 155);
+              color: rgb(205, 92, 155);
+              padding: 0.4em 0.8em;
+              cursor: pointer;
+              font-family: inherit;
+              font-size: 0.9em;
+              border-radius: 3px;
+            }
+            button:hover {
+              background: rgba(205, 92, 155, 0.3);
+            }
+            button.active {
+              background: rgb(205, 92, 155);
+              color: black;
+            }
+            .scroll-speed {
+              display: flex;
+              gap: 0.5em;
+              align-items: center;
+            }
+            .scroll-speed label {
+              font-size: 0.85em;
+              color: rgb(150, 150, 150);
+            }
+            .scroll-speed input {
+              width: 80px;
             }
             a {
               color: rgb(205, 92, 155);
@@ -918,12 +1174,132 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
             a:hover {
               text-decoration: underline;
             }
+            .code-container {
+              flex: 1;
+              overflow: hidden;
+              position: relative;
+            }
+            .code-scroll {
+              padding: 2em;
+              overflow-y: auto;
+              height: 100%;
+              position: relative;
+            }
+            .code-scroll.auto-scrolling {
+              overflow-y: hidden; /* Hide scrollbar during animation */
+              animation: autoScroll var(--scroll-duration, 60s) linear infinite;
+            }
+            .code-scroll.auto-scrolling pre {
+              animation: smoothScroll var(--scroll-duration, 60s) linear infinite;
+            }
+            pre {
+              margin: 0;
+              white-space: pre-wrap;
+              word-break: break-word;
+            }
+            @keyframes autoScroll {
+              0% {
+                scroll-behavior: smooth;
+              }
+              100% {
+                scroll-behavior: smooth;
+              }
+            }
+            @keyframes smoothScroll {
+              from {
+                transform: translateY(0);
+              }
+              to {
+                transform: translateY(calc(-100% + 100vh - 250px));
+              }
+            }
+            .badge {
+              display: inline-block;
+              padding: 0.2em 0.6em;
+              background: rgba(100, 150, 255, 0.2);
+              border: 1px solid rgb(100, 150, 255);
+              color: rgb(100, 150, 255);
+              border-radius: 3px;
+              font-size: 0.75em;
+              margin-left: 0.5em;
+            }
           </style>
         </head>
         <body>
-          <h1>${slug ? `piece: ${slug}` : 'piece source'}</h1>
-          ${slug ? `<p><a href="https://aesthetic.computer/${slug}" target="_blank">→ open on aesthetic.computer</a></p>` : ''}
-          <pre>${source.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
+          <div class="header">
+            <h1>
+              ${slug ? `piece: ${slug}` : 'piece source'}
+              ${isJavaScript ? '<span class="badge">.mjs</span>' : ''}
+              ${isKidLisp ? '<span class="badge">.lisp</span>' : ''}
+              <span class="badge" style="background: rgba(100, 100, 100, 0.2); border-color: rgb(150, 150, 150); color: rgb(150, 150, 150);">${source.split('\\n').length} lines</span>
+            </h1>
+            ${slug ? `<p style="margin: 0;"><a href="https://aesthetic.computer/${slug}" target="_blank">→ open on aesthetic.computer</a></p>` : ''}
+            <div class="controls">
+              <button id="scrollBtn" onclick="toggleScroll()">▶ Auto-scroll</button>
+              <div class="scroll-speed">
+                <label for="speedRange">Speed:</label>
+                <input type="range" id="speedRange" min="10" max="120" value="60" 
+                       oninput="updateSpeed(this.value)">
+                <span id="speedLabel">60s</span>
+              </div>
+            </div>
+          </div>
+          <div class="code-container">
+            <div class="code-scroll" id="codeScroll">
+              <pre>${highlightedSource}</pre>
+            </div>
+          </div>
+          <script>
+            let isScrolling = true; // Start with auto-scroll enabled
+            const scrollContainer = document.getElementById('codeScroll');
+            const scrollBtn = document.getElementById('scrollBtn');
+            const speedLabel = document.getElementById('speedLabel');
+            
+            // Initialize auto-scroll on load
+            window.addEventListener('load', () => {
+              scrollContainer.classList.add('auto-scrolling');
+              scrollBtn.classList.add('active');
+              scrollBtn.textContent = '⏸ Pause';
+            });
+            
+            function toggleScroll() {
+              isScrolling = !isScrolling;
+              if (isScrolling) {
+                scrollContainer.classList.add('auto-scrolling');
+                scrollBtn.classList.add('active');
+                scrollBtn.textContent = '⏸ Pause';
+              } else {
+                scrollContainer.classList.remove('auto-scrolling');
+                scrollBtn.classList.remove('active');
+                scrollBtn.textContent = '▶ Auto-scroll';
+              }
+            }
+            
+            function updateSpeed(seconds) {
+              document.documentElement.style.setProperty('--scroll-duration', seconds + 's');
+              speedLabel.textContent = seconds + 's';
+            }
+            
+            // Pause on hover
+            scrollContainer.addEventListener('mouseenter', () => {
+              if (isScrolling) {
+                scrollContainer.style.animationPlayState = 'paused';
+              }
+            });
+            
+            scrollContainer.addEventListener('mouseleave', () => {
+              if (isScrolling) {
+                scrollContainer.style.animationPlayState = 'running';
+              }
+            });
+            
+            // Manual scroll disables auto-scroll
+            scrollContainer.addEventListener('wheel', () => {
+              if (isScrolling) {
+                toggleScroll();
+              }
+            });
+          <\/script>
         </body>
         </html>
       `;
@@ -937,6 +1313,24 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
       setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
     }
 
+    // Helper function to open source modal from DOM element
+    async function openSourceModalFromElement(element) {
+      const sourceId = element.dataset.sourceId;
+      const uri = element.dataset.uri;
+      const slug = element.dataset.slug;
+      const language = element.dataset.language || 'mjs';
+      
+      const sourceHolder = document.getElementById(sourceId);
+      if (sourceHolder) {
+        const source = sourceHolder.textContent;
+        // Add language extension to slug for proper detection
+        const slugWithExtension = slug.includes('.') ? slug : `${slug}.${language}`;
+        await openSourceModal(uri, source, slugWithExtension);
+      } else {
+        console.error('Source not found for ID:', sourceId);
+      }
+    }
+
     // Render a painting record
     function renderPainting(record) {
       const { value, uri } = record;
@@ -1041,17 +1435,16 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
       const card = document.createElement('div');
       card.className = 'record-card';
       
-      const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const bgColor = isDark ? 'rgba(0,0,0,0.8)' : 'rgba(0,0,0,0.05)';
-      
-      // Create card with loading state
+      // Create initial card HTML with preview container
       card.innerHTML = `
         <div class="record-header">
           <span class="record-date">${formatDate(value.when || value.createdAt)}</span>
           <span class="lexicon-badge" onclick="openLexiconModal('${lexicon}')">${typeName}</span>
         </div>
         <div class="record-content">
-          <pre class="record-text" style="font-size: 0.85em; overflow-x: auto; background: ${bgColor}; padding: 0.5em; border-radius: 2px; color: #808080;">Loading syntax highlighting...</pre>
+          <div class="source-preview-container" style="margin: 0.5em 0;">
+            <div style="font-size: 0.75em; color: rgb(150, 150, 150);">loading source...</div>
+          </div>
           <div style="margin-top: 0.5em; display: flex; gap: 0.5em; flex-wrap: wrap;">
             ${value.code ? `<a href="${value.acUrl || `https://aesthetic.computer/$${value.code}`}" class="record-link" style="display: inline-block; padding: 0.4em 0.8em; background: rgba(205, 92, 155, 0.1); border: 1px solid rgb(205, 92, 155); border-radius: 3px; font-size: 0.85em;">█ prompt.ac/<strong>$</strong><strong>${value.code}</strong></a>` : ''}
             <a href="https://pdsls.dev/at://${uri.split('//')[1]}" class="record-link" style="display: inline-block; padding: 0.4em 0.8em; background: rgba(100, 150, 200, 0.1); border: 1px solid rgb(100, 150, 200); border-radius: 3px; font-size: 0.85em; color: rgb(100, 150, 200);">${rkey}</a>
@@ -1059,20 +1452,53 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
         </div>
       `;
       
-      // Highlight the source code asynchronously
+      // Highlight and animate the source code asynchronously
       if (value.source) {
-        highlightKidlisp(value.source).then(highlighted => {
-          const preElement = card.querySelector('.record-text');
-          if (preElement) {
-            preElement.innerHTML = highlighted;
-          }
+        highlightKidlisp(value.source).then(highlightedSource => {
+          const previewContainer = card.querySelector('.source-preview-container');
+          if (!previewContainer) return;
+          
+          // Store source for modal
+          const sourceId = `kidlisp-${rkey}`;
+          sourceMap[sourceId] = value.source;
+          
+          // Language badge
+          const languageBadge = '<span style="display: inline-block; padding: 0.15em 0.4em; background: rgba(147, 51, 234, 0.1); color: rgb(147, 51, 234); border-radius: 3px; font-size: 0.85em; font-weight: 600; margin-left: 0.5em;">KidLisp</span>';
+          
+          // Calculate dynamic font size and animation speed based on content
+          const lineCount = value.source.split('\n').length;
+          const fontSize = lineCount > 50 ? '0.55em' : lineCount > 30 ? '0.6em' : lineCount > 15 ? '0.7em' : '0.8em';
+          
+          // Shorter programs scroll faster - scale duration based on line count
+          const animationDuration = Math.max(15, Math.min(60, lineCount * 0.8));
+          
+          // Generate line numbers (doubled for the duplicated content)
+          const lineNumbers = Array.from({length: lineCount * 2}, (_, i) => 
+            `<div>${(i % lineCount) + 1}</div>`
+          ).join('');
+          
+          previewContainer.innerHTML = `
+            <div class="source-preview" 
+                 data-source-id="${sourceId}"
+                 data-uri="${uri.replace(/"/g, '&quot;')}"
+                 data-language="lisp"
+                 onclick="openSourceModalFromElement(this)" 
+                 style="padding: 0.5em; border-radius: 2px; cursor: pointer; font-family: monospace; font-size: ${fontSize}; color: rgb(100, 100, 100);">
+              <div class="preview-scroll-container" style="animation: previewScrollLoop ${animationDuration}s linear infinite;">
+                <div class="line-numbers">${lineNumbers}</div>
+                <div class="preview-content" style="white-space: pre; overflow-wrap: normal;">
+                  ${highlightedSource}
+                  <div style="margin: 2em 0; border-top: 1px dashed rgba(100,100,100,0.3); padding-top: 2em;"></div>
+                  ${highlightedSource}
+                </div>
+              </div>
+            </div>
+          `;
         }).catch(error => {
           console.error('Highlighting error:', error);
-          // Fallback to plain text
-          const preElement = card.querySelector('.record-text');
-          if (preElement) {
-            preElement.textContent = value.source;
-            preElement.style.color = isDark ? '#ffffff' : '#333333';
+          const previewContainer = card.querySelector('.source-preview-container');
+          if (previewContainer) {
+            previewContainer.innerHTML = `<pre style="font-size: 0.85em; color: rgb(150, 150, 150);">${value.source}</pre>`;
           }
         });
       }
@@ -1110,27 +1536,111 @@ Uses ONLY ATProto APIs - no aesthetic.computer backend dependencies
       // Fetch source code from media URL if available
       if (value.slug && handle) {
         try {
-          let sourceUrl;
-          // Anonymous pieces use /media/pieces/slug, user pieces use /media/@handle/piece/slug.mjs
+          let source = null;
+          let language = 'mjs'; // Default to JavaScript
+          
+          // Anonymous pieces: try art.aesthetic.computer with both .lisp and .mjs
           if (handle === 'art.at.aesthetic.computer') {
-            sourceUrl = `${API_BASE_URL}/media/pieces/${value.slug}.mjs`;
+            // Try .lisp first, then .mjs
+            const lispUrl = `https://art.aesthetic.computer/${value.slug}.lisp`;
+            let response = await fetch(lispUrl);
+            
+            if (response.ok) {
+              source = await response.text();
+              language = 'lisp';
+            } else {
+              // Try .mjs
+              const mjsUrl = `https://art.aesthetic.computer/${value.slug}.mjs`;
+              response = await fetch(mjsUrl);
+              if (response.ok) {
+                source = await response.text();
+                language = 'mjs';
+              }
+            }
           } else {
-            sourceUrl = `${API_BASE_URL}/media/@${handle}/piece/${value.slug}.mjs`;
+            // User pieces use /media/@handle/piece/slug.mjs
+            const sourceUrl = `${API_BASE_URL}/media/@${handle}/piece/${value.slug}.mjs`;
+            const response = await fetch(sourceUrl);
+            if (response.ok) {
+              source = await response.text();
+              language = 'mjs';
+            }
           }
           
-          const response = await fetch(sourceUrl);
-          if (response.ok) {
-            const source = await response.text();
-            const previewText = source.length > 200 ? source.substring(0, 200) + '...' : source;
-            
+          // Render source if found
+          if (source) {
             const previewContainer = card.querySelector('.source-preview-container');
             if (previewContainer) {
+              // Create a unique ID for this source
+              const sourceId = `source-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+              
+              // Store source in a hidden element to avoid escaping issues
+              const sourceHolder = document.createElement('div');
+              sourceHolder.id = sourceId;
+              sourceHolder.style.display = 'none';
+              sourceHolder.textContent = source;
+              sourceHolder.dataset.language = language;
+              document.body.appendChild(sourceHolder);
+              
+              // Apply syntax highlighting to full source (not just preview)
+              let highlightedSource;
+              if (language === 'lisp') {
+                // Use async highlighter for KidLisp
+                highlightKidlisp(source).then(highlighted => {
+                  if (highlighted && highlighted.trim()) {
+                    // Update the preview with highlighted code (duplicated for seamless loop)
+                    const previewContent = previewContainer.querySelector('.preview-content');
+                    if (previewContent) {
+                      previewContent.innerHTML = `
+                        ${highlighted}
+                        <div style="margin: 2em 0; border-top: 1px dashed rgba(100,100,100,0.3); padding-top: 2em;"></div>
+                        ${highlighted}
+                      `;
+                    }
+                  }
+                });
+                // Start with plain text while loading
+                highlightedSource = source.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+              } else if (language === 'mjs') {
+                highlightedSource = highlightJavaScript(source);
+              } else {
+                highlightedSource = source.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+              }
+              
+              // Language badge colors
+              const languageBadge = language === 'lisp' 
+                ? '<span style="display: inline-block; padding: 0.15em 0.4em; background: rgba(147, 51, 234, 0.1); color: rgb(147, 51, 234); border-radius: 3px; font-size: 0.85em; font-weight: 600; margin-left: 0.5em;">KidLisp</span>'
+                : '<span style="display: inline-block; padding: 0.15em 0.4em; background: rgba(234, 179, 8, 0.1); color: rgb(234, 179, 8); border-radius: 3px; font-size: 0.85em; font-weight: 600; margin-left: 0.5em;">JavaScript</span>';
+              
+              // Calculate dynamic font size and animation speed based on content
+              const lineCount = source.split('\n').length;
+              const fontSize = lineCount > 50 ? '0.55em' : lineCount > 30 ? '0.6em' : lineCount > 15 ? '0.7em' : '0.8em';
+              
+              // Shorter programs scroll faster - scale duration based on line count
+              const animationDuration = Math.max(15, Math.min(60, lineCount * 0.8));
+              
+              // Generate line numbers (doubled for the duplicated content)
+              const lineNumbers = Array.from({length: lineCount * 2}, (_, i) => 
+                `<div>${(i % lineCount) + 1}</div>`
+              ).join('');
+              
               previewContainer.innerHTML = `
-                <div class="source-preview" onclick="openSourceModal('${uri.replace(/'/g, "\\'")}', ${JSON.stringify(source).replace(/'/g, "\\'")}, '${value.slug}')" 
-                     style="padding: 0.5em; background: rgba(0,0,0,0.05); border-radius: 2px; cursor: pointer; font-family: monospace; font-size: 0.75em; color: rgb(100, 100, 100); overflow: hidden; white-space: pre-wrap; word-break: break-all;">
-                  ${previewText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}
+                <div class="source-preview" 
+                     data-source-id="${sourceId}"
+                     data-uri="${uri.replace(/"/g, '&quot;')}"
+                     data-slug="${value.slug}"
+                     data-language="${language}"
+                     onclick="openSourceModalFromElement(this)" 
+                     style="padding: 0.5em; border-radius: 2px; cursor: pointer; font-family: monospace; font-size: ${fontSize}; color: rgb(100, 100, 100);">
+                  <div class="preview-scroll-container" style="animation: previewScrollLoop ${animationDuration}s linear infinite;">
+                    <div class="line-numbers">${lineNumbers}</div>
+                    <div class="preview-content" style="white-space: pre; overflow-wrap: normal;">
+                      ${highlightedSource}
+                      <div style="margin: 2em 0; border-top: 1px dashed rgba(100,100,100,0.3); padding-top: 2em;"></div>
+                      ${highlightedSource}
+                    </div>
+                  </div>
                 </div>
-                <div style="font-size: 0.75em; color: rgb(150, 150, 150); margin-top: 0.25em;">↑ click to view full source</div>
               `;
             }
           } else {
diff --git a/query-piece.mjs b/query-piece.mjs
new file mode 100644
index 0000000000..49d63e6e29
--- /dev/null
+++ b/query-piece.mjs
@@ -0,0 +1,39 @@
+// Quick script to query pieces from MongoDB
+import { connect } from './system/backend/database.mjs';
+
+const slug = process.argv[2];
+
+try {
+  const { db, disconnect } = await connect();
+  const collection = db.collection('pieces');
+  
+  if (slug) {
+    const piece = await collection.findOne({ slug });
+    
+    if (piece) {
+      console.log('Found piece:');
+      console.log(JSON.stringify(piece, null, 2));
+      console.log('\nKeys in document:', Object.keys(piece));
+    } else {
+      console.log(`No piece found with slug: ${slug}`);
+    }
+  } else {
+    // Show a few recent pieces with atproto field to see the structure
+    console.log('Fetching recent pieces with atproto field...\n');
+    const pieces = await collection
+      .find({ 'atproto.rkey': { $exists: true } })
+      .sort({ when: -1 })
+      .limit(3)
+      .toArray();
+    
+    pieces.forEach((piece, i) => {
+      console.log(`\n=== Piece ${i + 1} ===`);
+      console.log(JSON.stringify(piece, null, 2));
+    });
+  }
+  
+  await disconnect();
+} catch (error) {
+  console.error('Error querying piece:', error);
+  process.exit(1);
+}
diff --git a/system/TAPE-VIDEO-PROCESSING.md b/system/TAPE-VIDEO-PROCESSING.md
new file mode 100644
index 0000000000..5550954774
--- /dev/null
+++ b/system/TAPE-VIDEO-PROCESSING.md
@@ -0,0 +1,85 @@
+# Tape Video Processing Setup
+
+## Overview
+Tapes are converted from ZIP (frames + audio) to MP4 using Netlify Background Functions.
+
+## Duration Limit
+- **Maximum tape duration: 30 seconds**
+- Client should check `metadata.totalDuration` before allowing POST
+- Server validates and returns error if exceeded
+
+## Architecture
+
+### Upload Flow
+1. Client uploads ZIP to DigitalOcean Spaces
+2. Client POSTs to `/api/track-tape` with metadata
+3. Server validates duration (max 30s)
+4. Server creates MongoDB record
+5. Server invokes background function (fire-and-forget)
+6. Client receives response immediately
+
+### Background Processing
+1. Background function runs (up to 15 minutes)
+2. Downloads ZIP from Spaces
+3. Converts to MP4 using ffmpeg
+4. Uploads MP4 back to Spaces
+5. Syncs to ATProto (if user has account)
+6. Updates MongoDB with status
+
+## Installation
+
+```bash
+cd system
+npm install @ffmpeg-installer/ffmpeg
+```
+
+## Configuration
+
+### netlify.toml
+Background function is configured with:
+- External modules: `@aws-sdk/client-s3`, `@atproto/api`, `adm-zip`, `@ffmpeg-installer/ffmpeg`
+- Included backend files
+- Required environment variables
+
+### Environment Variables
+- `ART_KEY` / `DO_SPACES_KEY` - DigitalOcean Spaces access key
+- `ART_SECRET` / `DO_SPACES_SECRET` - DigitalOcean Spaces secret
+- `MONGODB_CONNECTION_STRING` - MongoDB connection
+- `PDS_URL` - ATProto PDS URL
+
+## Client-Side Duration Check
+
+Add to tape upload UI:
+
+```javascript
+// Before showing "Post to ATProto" button
+const MAX_DURATION = 30; // seconds
+const duration = tapeMetadata.totalDuration;
+
+if (duration > MAX_DURATION) {
+  // Hide Post button or show warning
+  console.log(`Tape too long: ${duration}s (max ${MAX_DURATION}s)`);
+  return;
+}
+
+// Show Post button
+```
+
+## Retry Failed Conversions
+
+If background function fails, tapes can be reprocessed:
+
+```bash
+cd system/backend
+node sync-atproto.mjs live --tapes-only --anonymous-only
+```
+
+## Monitoring
+
+Check tape conversion status in MongoDB:
+- `mp4Status`: "pending" | "processing" | "complete" | "failed"
+- `mp4StartedAt`: When conversion started
+- `mp4CompletedAt`: When conversion completed
+- `mp4Error`: Error message if failed
+- `mp4`: URL to MP4 file
+- `atproto.rkey`: ATProto record key (if synced)
diff --git a/system/backend/sync-atproto.mjs b/system/backend/sync-atproto.mjs
index c3d952ade7..7422852823 100644
--- a/system/backend/sync-atproto.mjs
+++ b/system/backend/sync-atproto.mjs
@@ -348,7 +348,7 @@ async function syncContentForUser(contentType, user, options = {}) {
       
       atprotoByRkey.set(rkey, record);
       
-      // Check if record has a thumbnail blob (for media types that should have one)
+      // Check if record has required blobs (thumbnail for paintings/moods, video for tapes)
       // Note: thumbnail is optional in lexicon, but we want to ensure it exists if the painting exists
       // The @atproto/api library deserializes blobs, so thumbnail.ref will be a CID object, not {$link: "..."}
       if (config.mediaType === MediaTypes.PAINTING || config.mediaType === MediaTypes.MOOD) {
@@ -363,6 +363,17 @@ async function syncContentForUser(contentType, user, options = {}) {
         }
       }
       
+      // Check for missing video blob on tapes
+      if (config.mediaType === MediaTypes.TAPE) {
+        const hasVideo = record.value.video && 
+                        record.value.video.ref &&
+                        typeof record.value.video.ref !== 'undefined';
+        
+        if (!hasVideo && ref) {
+          recordsWithoutBlobs.push({ record, rkey, ref });
+        }
+      }
+      
       if (ref) {
         if (atprotoByRef.has(ref)) {
           // Found a duplicate!
@@ -699,6 +710,8 @@ async function syncAll(options = {}) {
     const totalMongo = typeStats.reduce((sum, s) => sum + s.mongoTotal, 0);
     const totalAtproto = typeStats.reduce((sum, s) => sum + s.atprotoTotal, 0);
     const totalDuplicates = typeStats.reduce((sum, s) => sum + s.duplicatesDeleted, 0);
+    const totalMissingBlobs = typeStats.reduce((sum, s) => sum + s.missingBlobs, 0);
+    const totalBlobsFixed = typeStats.reduce((sum, s) => sum + s.blobsFixed, 0);
     const totalCreated = typeStats.reduce((sum, s) => sum + s.created, 0);
     const totalErrors = typeStats.reduce((sum, s) => sum + s.errors.length, 0);
     
@@ -706,6 +719,7 @@ async function syncAll(options = {}) {
     console.log(`   MongoDB records: ${totalMongo}`);
     console.log(`   ATProto records: ${totalAtproto}`);
     console.log(`   Duplicates to delete: ${totalDuplicates}`);
+    console.log(`   Missing blobs to fix: ${totalMissingBlobs} (will delete & recreate: ${totalBlobsFixed})`);
     console.log(`   Records to create: ${totalCreated}`);
     if (totalErrors > 0) {
       console.log(`   Errors: ${totalErrors}`);
diff --git a/system/backend/tape-atproto.mjs b/system/backend/tape-atproto.mjs
index 6887d73165..0f66269fa5 100644
--- a/system/backend/tape-atproto.mjs
+++ b/system/backend/tape-atproto.mjs
@@ -10,10 +10,11 @@ const PDS_URL = process.env.PDS_URL || "https://at.aesthetic.computer";
  * Sync a MongoDB tape to ATProto after MP4 conversion completes
  * @param {Object} database - MongoDB connection
  * @param {string} mongoId - Tape MongoDB _id as string
- * @param {string} mp4Url - Full URL to the MP4 file
+ * @param {Buffer} mp4Buffer - MP4 video data as Buffer
+ * @param {Buffer} thumbnailBuffer - Thumbnail image data as Buffer (optional)
  * @returns {Promise<Object>} { rkey, uri, cid } or { error }
  */
-export async function createTapeOnAtproto(database, mongoId, mp4Url) {
+export async function createTapeOnAtproto(database, mongoId, mp4Buffer, thumbnailBuffer) {
   const tapes = database.db.collection("tapes");
   const users = database.db.collection("users");
 
@@ -26,39 +27,37 @@ export async function createTapeOnAtproto(database, mongoId, mp4Url) {
     return { error: "Tape not found" };
   }
 
-  // Guest tapes don't sync to ATProto (no user account)
+  // 2. Get user account (or art-guest for anonymous tapes)
+  let user;
   if (!tape.user) {
-    shell.log(`ℹ️  Guest tape ${tape.code}, skipping ATProto sync`);
-    return { error: "Guest tape" };
-  }
-
-  // 2. Check if user has ATProto account
-  const user = await users.findOne({ _id: tape.user });
+    // Guest/anonymous content uses art.at.aesthetic.computer
+    shell.log(`ℹ️  Guest tape ${tape.code}, using art-guest account`);
+    user = await users.findOne({ _id: "art-guest" });
+    
+    if (!user?.atproto?.did || !user?.atproto?.password) {
+      shell.error(`❌ Art account not configured`);
+      return { error: "Art account not configured" };
+    }
+  } else {
+    // Regular user tape
+    user = await users.findOne({ _id: tape.user });
 
-  if (!user?.atproto?.did || !user?.atproto?.password) {
-    shell.log(`ℹ️  User ${tape.user} has no ATProto account, skipping sync`);
-    return { error: "No ATProto account" };
+    if (!user?.atproto?.did || !user?.atproto?.password) {
+      shell.log(`ℹ️  User ${tape.user} has no ATProto account, skipping sync`);
+      return { error: "No ATProto account" };
+    }
   }
 
   try {
-    // 3. Download MP4 file
-    shell.log(`📥 Downloading MP4: ${mp4Url}`);
-    const mp4Response = await fetch(mp4Url);
-    if (!mp4Response.ok) {
-      throw new Error(`Failed to download MP4: ${mp4Response.statusText}`);
-    }
-    const mp4Blob = await mp4Response.blob();
-    const mp4Buffer = await mp4Blob.arrayBuffer();
-
-    // 4. Login to ATProto
+    // 3. Login to ATProto
     const agent = new AtpAgent({ service: PDS_URL });
     await agent.login({
       identifier: user.atproto.did,
       password: user.atproto.password,
     });
 
-    // 5. Upload MP4 as blob
-    shell.log(`📤 Uploading MP4 to ATProto (${(mp4Buffer.byteLength / 1024 / 1024).toFixed(2)}MB)`);
+    // 4. Upload MP4 as blob directly to PDS
+    shell.log(`📤 Uploading MP4 to ATProto PDS (${(mp4Buffer.length / 1024 / 1024).toFixed(2)}MB)`);
     const blobResponse = await agent.uploadBlob(mp4Buffer, {
       encoding: "video/mp4",
     });
@@ -68,9 +67,9 @@ export async function createTapeOnAtproto(database, mongoId, mp4Url) {
     }
 
     const blob = blobResponse.data.blob;
-    shell.log(`✅ Blob uploaded: ${blob.ref.$link}`);
+    shell.log(`✅ Blob uploaded to PDS: ${blob.ref.$link}`);
 
-    // 6. Create ATProto record
+    // 5. Create ATProto record
     const atprotoRecord = await agent.com.atproto.repo.createRecord({
       repo: user.atproto.did,
       collection: "computer.aesthetic.tape",
@@ -98,7 +97,7 @@ export async function createTapeOnAtproto(database, mongoId, mp4Url) {
     const rkey = uri.split("/").pop();
     shell.log(`🦋 Created ATProto tape: ${rkey}`);
 
-    // 7. Update MongoDB with ATProto references
+    // 6. Update MongoDB with ATProto references
     await tapes.updateOne(
       { _id: new ObjectId(mongoId) },
       {
diff --git a/system/backend/tape-to-mp4.mjs b/system/backend/tape-to-mp4.mjs
index 046c81e1eb..2bdb745f8e 100644
--- a/system/backend/tape-to-mp4.mjs
+++ b/system/backend/tape-to-mp4.mjs
@@ -9,15 +9,40 @@ import { randomBytes } from 'crypto';
 import AdmZip from 'adm-zip';
 import { shell } from './shell.mjs';
 
+// Initialize ffmpeg path lazily to avoid top-level await
+let ffmpegPath = null;
+let ffmpegInitialized = false;
+
+/**
+ * Initialize ffmpeg path (tries bundled, falls back to system)
+ * @returns {Promise<string>}
+ */
+async function initFfmpegPath() {
+  if (ffmpegInitialized) return ffmpegPath;
+  
+  try {
+    const ffmpegInstaller = await import('@ffmpeg-installer/ffmpeg');
+    ffmpegPath = ffmpegInstaller.path;
+    shell.log(`📦 Using bundled ffmpeg: ${ffmpegPath}`);
+  } catch (e) {
+    ffmpegPath = 'ffmpeg';
+    shell.log(`📦 Using system ffmpeg`);
+  }
+  
+  ffmpegInitialized = true;
+  return ffmpegPath;
+}
+
 /**
  * Check if ffmpeg is available
  * @returns {Promise<boolean>}
  */
 export async function checkFfmpegAvailable() {
+  const ffmpeg = await initFfmpegPath();
   return new Promise((resolve) => {
-    const ffmpeg = spawn('ffmpeg', ['-version']);
-    ffmpeg.on('error', () => resolve(false));
-    ffmpeg.on('close', (code) => resolve(code === 0));
+    const proc = spawn(ffmpeg, ['-version']);
+    proc.on('error', () => resolve(false));
+    proc.on('close', (code) => resolve(code === 0));
   });
 }
 
@@ -156,7 +181,7 @@ async function framesToMp4(tempDir, timing) {
     shell.log(`🎬 Running ffmpeg at ${frameRate}fps`);
     
     return new Promise((resolve, reject) => {
-      const ffmpeg = spawn('ffmpeg', ffmpegArgs);
+      const ffmpeg = spawn(ffmpegPath, ffmpegArgs);
       
       let stderr = '';
       ffmpeg.stderr.on('data', (data) => {
@@ -265,6 +290,9 @@ export async function convertTapeToMp4(zipUrl) {
   let tempDir = null;
   
   try {
+    // 0. Initialize ffmpeg path
+    await initFfmpegPath();
+    
     // 1. Check ffmpeg availability
     const ffmpegAvailable = await checkFfmpegAvailable();
     if (!ffmpegAvailable) {
diff --git a/system/deno.lock b/system/deno.lock
index 8bb0e7d7e0..34f74514d9 100644
--- a/system/deno.lock
+++ b/system/deno.lock
@@ -217,6 +217,7 @@
         "npm:@atproto/api@^0.17.2",
         "npm:@aws-sdk/client-s3@^3.896.0",
         "npm:@aws-sdk/s3-request-presigner@^3.896.0",
+        "npm:@ffmpeg-installer/ffmpeg@^1.1.0",
         "npm:@ffmpeg/core@^0.12.10",
         "npm:@ffmpeg/ffmpeg@^0.12.15",
         "npm:@geckos.io/client@^3.0.2",
diff --git a/system/netlify.toml b/system/netlify.toml
index 9b60ca962c..71354a3200 100644
--- a/system/netlify.toml
+++ b/system/netlify.toml
@@ -5,8 +5,17 @@ ignore = "bash ./ignore-index.sh"
 command = "rm -f public/index.html" # Remove index.html before build
 # command = "bash ./github-discord.sh"
 # command = "echo 'Building...'"
+
 [functions]
 node_bundler = "esbuild"
+directory = "netlify/functions"
+
+[functions."tape-convert-background"]
+node_bundler = "esbuild"
+external_node_modules = ["@atproto/api", "adm-zip", "@ffmpeg-installer/ffmpeg"]
+included_files = ["backend/**/*.mjs"]
+included_env_vars = ["MONGODB_CONNECTION_STRING", "MONGODB_NAME", "PDS_URL", "CONTEXT"]
+
 [functions.apple-developer-merchantid-domain-association]
 included_files = ["public/.well-known/*"]
 included_env_vars = []
@@ -435,7 +444,12 @@ status = 200
 force = false
 [[redirects]]
 from = "/api/track-tape"
-to = "/.netlify/functions/track-tape"
+to = "/.netlify/functions/track-media"
+status = 200
+force = false
+[[redirects]]
+from = "/api/tape-convert-background"
+to = "/.netlify/functions/tape-convert-background"
 status = 200
 force = false
 [[redirects]]
diff --git a/system/netlify/functions/tape-convert-background.mjs b/system/netlify/functions/tape-convert-background.mjs
new file mode 100644
index 0000000000..402ca4d714
--- /dev/null
+++ b/system/netlify/functions/tape-convert-background.mjs
@@ -0,0 +1,111 @@
+// Tape Convert Background Function
+// Converts tape ZIP to MP4 with video blob, then syncs to ATProto
+// Max execution: 15 minutes (Netlify Background Function)
+
+import { connect } from "../../backend/database.mjs";
+import { convertTapeToMp4 } from "../../backend/tape-to-mp4.mjs";
+import { createTapeOnAtproto } from "../../backend/tape-atproto.mjs";
+
+const MAX_DURATION_SECONDS = 30; // Only process tapes up to 30 seconds
+
+export async function handler(event, context) {
+  const { mongoId, slug, zipUrl, metadata } = JSON.parse(event.body);
+  
+  console.log(`🎬 Background conversion started for tape: ${slug} (${mongoId})`);
+  console.log(`📹 ZIP URL: ${zipUrl}`);
+
+  const database = await connect();
+  const tapes = database.db.collection("tapes");
+  const { ObjectId } = await import("mongodb");
+
+  try {
+    // Update status to processing
+    await tapes.updateOne(
+      { _id: new ObjectId(mongoId) },
+      { $set: { mp4Status: "processing", mp4StartedAt: new Date() } }
+    );
+
+    // Check duration from metadata
+    const duration = metadata?.totalDuration || 0;
+    if (duration > MAX_DURATION_SECONDS) {
+      throw new Error(`Tape too long: ${duration}s (max ${MAX_DURATION_SECONDS}s)`);
+    }
+
+    // Convert ZIP to MP4
+    console.log(`🎬 Converting ZIP to MP4...`);
+    const result = await convertTapeToMp4(zipUrl);
+    const mp4Buffer = result.video;
+    const thumbnailBuffer = result.thumbnail;
+
+    const videoSizeKB = (mp4Buffer.length / 1024).toFixed(2);
+    console.log(`✅ MP4 ready: ${videoSizeKB} KB`);
+
+    // Update MongoDB with completion status
+    await tapes.updateOne(
+      { _id: new ObjectId(mongoId) },
+      { 
+        $set: { 
+          mp4Status: "complete",
+          mp4CompletedAt: new Date(),
+          mp4Size: mp4Buffer.length
+        } 
+      }
+    );
+
+    console.log(`✅ MongoDB updated with MP4 completion`);
+
+    // Sync to ATProto (uploads blob directly to PDS)
+    console.log(`🦋 Syncing to ATProto...`);
+    const atprotoResult = await createTapeOnAtproto(database, mongoId, mp4Buffer, thumbnailBuffer);
+
+    if (atprotoResult.error) {
+      console.log(`ℹ️  ATProto sync skipped: ${atprotoResult.error}`);
+      await database.disconnect();
+      return {
+        statusCode: 200,
+        body: JSON.stringify({
+          success: true,
+          message: "MP4 created, ATProto sync skipped",
+          reason: atprotoResult.error
+        })
+      };
+    }
+
+    console.log(`✅ ATProto sync complete: ${atprotoResult.rkey}`);
+    await database.disconnect();
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({
+        success: true,
+        message: "MP4 created and synced to ATProto",
+        rkey: atprotoResult.rkey
+      })
+    };
+
+  } catch (error) {
+    console.error(`❌ Background conversion failed:`, error);
+    
+    // Update MongoDB with error
+    await tapes.updateOne(
+      { _id: new ObjectId(mongoId) },
+      { 
+        $set: { 
+          mp4Status: "failed",
+          mp4Error: error.message,
+          mp4FailedAt: new Date()
+        } 
+      }
+    );
+
+    await database.disconnect();
+
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        success: false,
+        error: error.message
+      })
+    };
+  }
+}
diff --git a/system/netlify/functions/track-media.mjs b/system/netlify/functions/track-media.mjs
index 7863629389..3ee0914501 100644
--- a/system/netlify/functions/track-media.mjs
+++ b/system/netlify/functions/track-media.mjs
@@ -1,47 +1,82 @@
 // Track Media, 25.10.09
 // Formerly `Painting`
-// POST: Create a new record in the database for a user uploaded painting or piece.
-// Now generates short codes for ALL paintings (user and guest)
+// POST: Create a new record in the database for user uploaded media (paintings, pieces, tapes).
+// Now generates short codes for ALL media (user and guest)
 
 /* #region 🏁 TODO 
   - [] Eventually add metadata to paintings... like titles.
+  + [x] Merged track-tape into track-media for code reuse
 #endregion */
 
 import { authorize, getHandleOrEmail } from "../../backend/authorization.mjs";
 import { connect } from "../../backend/database.mjs";
 import { respond } from "../../backend/http.mjs";
-import { customAlphabet } from 'nanoid';
+import { generateUniqueCode } from "../../backend/generate-short-code.mjs";
 import { createMediaRecord, deleteMediaRecord, MediaTypes } from "../../backend/media-atproto.mjs";
+import { S3Client, PutObjectAclCommand } from "@aws-sdk/client-s3";
 
 const dev = process.env.CONTEXT === "dev";
 
-// Code generator - lowercase preferred (3x) but uppercase included for more space
-const consonants = 'bcdfghjklmnpqrstvwxyz' + 'bcdfghjklmnpqrstvwxyz' + 'BCDFGHJKLMNPQRSTVWXYZ';
-const vowels = 'aeiou' + 'aeiou' + 'AEIOU';
-const numbers = '23456789'; // Exclude 0,1 (look like O,l)
-const alphabet = consonants + vowels + numbers;
-const CODE_LENGTH = 3;
-const nanoid = customAlphabet(alphabet, CODE_LENGTH);
-const MAX_COLLISION_ATTEMPTS = 100;
-
-async function generateUniqueCode(collection) {
-  for (let attempt = 0; attempt < MAX_COLLISION_ATTEMPTS; attempt++) {
-    const code = nanoid();
+// Duration limit for tape background processing (in seconds)
+const MAX_TAPE_DURATION = 30;
+
+/**
+ * Invoke Netlify Background Function for MP4 conversion (tapes only)
+ * @param {Object} options - Conversion job parameters
+ * @returns {Promise<void>}
+ */
+async function invokeBackgroundConversion({ mongoId, slug, zipUrl, metadata }) {
+  console.log(`🎬 Invoking background conversion for tape ${slug} (${mongoId})`);
+  
+  try {
+    // Netlify background functions are invoked by calling them via /api/ route
+    let baseUrl = process.env.URL || 'https://localhost:8888';
+    const backgroundUrl = `${baseUrl}/api/tape-convert-background`;
+    
+    console.log(`🎬 Background function URL: ${backgroundUrl}`);
+    
+    // For local dev with self-signed certs, we need to disable SSL verification
+    const isLocalhost = baseUrl.includes('localhost');
+    const originalRejectUnauthorized = process.env.NODE_TLS_REJECT_UNAUTHORIZED;
     
-    // Check if code already exists
-    const existing = await collection.findOne({ code });
-    if (!existing) {
-      return code;
+    if (isLocalhost) {
+      process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
     }
     
-    console.log(`⚠️  Code collision detected: ${code}, retrying...`);
+    const response = await fetch(backgroundUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Netlify-Event": "background-function",
+      },
+      body: JSON.stringify({
+        mongoId,
+        slug,
+        zipUrl,
+        metadata,
+      }),
+    });
+    
+    // Restore original setting
+    if (isLocalhost) {
+      if (originalRejectUnauthorized === undefined) {
+        delete process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+      } else {
+        process.env.NODE_TLS_REJECT_UNAUTHORIZED = originalRejectUnauthorized;
+      }
+    }
+    
+    if (!response.ok) {
+      throw new Error(`Background function returned ${response.status}: ${await response.text()}`);
+    }
+    
+    console.log(`✅ Background conversion invoked`);
+    
+  } catch (error) {
+    console.error(`❌ Failed to invoke background conversion:`, error.message);
+    // Don't throw - let the request succeed anyway
+    // Conversion can be retried via sync-atproto script
   }
-  
-  // If we hit max attempts, use a longer code
-  const longerNanoid = customAlphabet(alphabet, CODE_LENGTH + 1);
-  const longerCode = longerNanoid();
-  console.log(`⚠️  Max collisions reached, using longer code: ${longerCode}`);
-  return longerCode;
 }
 
 export async function handler(event, context) {
@@ -79,11 +114,25 @@ export async function handler(event, context) {
 
     const database = await connect();
 
-    let type;
+    let type, metadata;
     if (body.ext === "png") {
       type = "paintings";
     } else if (body.ext === "mjs") {
       type = "pieces";
+    } else if (body.ext === "zip") {
+      type = "tapes";
+      metadata = body.metadata || {};
+      
+      // Validate tape duration
+      const duration = metadata.totalDuration || 0;
+      console.log(`⏱️  Tape duration: ${duration}s, Max: ${MAX_TAPE_DURATION}s`);
+      if (duration > MAX_TAPE_DURATION) {
+        return respond(400, { 
+          error: "TAPE_TOO_LONG",
+          message: `Tape duration ${duration}s exceeds maximum ${MAX_TAPE_DURATION}s`,
+          maxDuration: MAX_TAPE_DURATION
+        });
+      }
     } else {
       throw new Error(`Unsupported media type via extension: ${body.ext}`);
     }
@@ -95,27 +144,47 @@ export async function handler(event, context) {
       const slug = body.slug;
       
       // Create indexes (safe to call multiple times)
-      // Note: Match existing index specs exactly to avoid conflicts
-      await collection.createIndex({ code: 1 }, { unique: true, sparse: true });
-      await collection.createIndex({ user: 1 }); // No sparse - matches existing index
-      await collection.createIndex({ when: 1 });
-      await collection.createIndex({ slug: 1 });
-      if (user) {
-        await collection.createIndex({ slug: 1, user: 1 }, { unique: true });
+      // Note: Tapes already have code_1 index without sparse, so skip for tapes
+      try {
+        if (type !== 'tapes') {
+          await collection.createIndex({ code: 1 }, { unique: true, sparse: true });
+        } else {
+          // Tapes collection already has { code: 1 } unique index (not sparse)
+          // Just ensure it exists without sparse option
+          await collection.createIndex({ code: 1 }, { unique: true });
+        }
+        await collection.createIndex({ user: 1 }); // No sparse - matches existing index
+        await collection.createIndex({ when: 1 });
+        await collection.createIndex({ slug: 1 });
+        if (user) {
+          await collection.createIndex({ slug: 1, user: 1 }, { unique: true });
+        }
+      } catch (indexError) {
+        // Index already exists with different options - that's okay
+        console.log(`ℹ️  Index creation skipped (already exists): ${indexError.message}`);
       }
 
-      // Generate unique short code
-      const code = await generateUniqueCode(collection);
+      // Generate unique short code (random mode for tapes)
+      const code = await generateUniqueCode(collection, { 
+        mode: type === 'tapes' ? 'random' : undefined,
+        type: type === 'tapes' ? 'tape' : undefined
+      });
       
       try {
         const paintingDate = new Date();
         const record = {
-          code,          // NEW: short code for #abc lookups
+          code,
           slug,
           when: paintingDate,
           bucket: user ? "user-aesthetic-computer" : "art-aesthetic-computer",
         };
         
+        // Tape-specific fields
+        if (type === 'tapes') {
+          record.nuked = false;
+          record.mp4Status = "pending"; // Track conversion status
+        }
+        
         // Only add user field if authenticated (keep undefined for guests)
         if (user) {
           record.user = user.sub;
@@ -126,15 +195,58 @@ export async function handler(event, context) {
         const logType = user ? "user" : "guest";
         console.log(`✅ Created ${logType} ${type.slice(0, -1)}: slug=${slug}, code=${code}`);
         
-        const paintingId = insertResult.insertedId;
+        const mediaId = insertResult.insertedId;
+        
+        // Handle tapes differently - background MP4 conversion
+        if (type === 'tapes') {
+          // Make the uploaded ZIP publicly readable
+          try {
+            const s3Client = new S3Client({
+              endpoint: `https://sfo3.digitaloceanspaces.com`,
+              credentials: {
+                accessKeyId: process.env.ART_KEY || process.env.DO_SPACES_KEY,
+                secretAccessKey: process.env.ART_SECRET || process.env.DO_SPACES_SECRET,
+              },
+            });
+            
+            const key = user ? `${user.sub}/${slug}.zip` : `${slug}.zip`;
+            
+            const aclCommand = new PutObjectAclCommand({
+              Bucket: record.bucket,
+              Key: key,
+              ACL: "public-read",
+            });
+            
+            await s3Client.send(aclCommand);
+            console.log(`✅ Set public-read ACL for ${record.bucket}/${key}`);
+          } catch (aclError) {
+            console.error(`⚠️  Failed to set ACL:`, aclError.message);
+          }
+          
+          // Invoke background function for MP4 conversion (fire-and-forget)
+          invokeBackgroundConversion({
+            mongoId: mediaId.toString(),
+            slug: record.slug,
+            zipUrl: `https://${record.bucket}.sfo3.digitaloceanspaces.com/${user ? user.sub + '/' : ''}${slug}.zip`,
+            metadata: metadata,
+          }).catch(err => {
+            console.error('❌ Background conversion invocation error:', err);
+          });
+          
+          return respond(200, { 
+            slug, 
+            code,
+            maxDuration: MAX_TAPE_DURATION
+          });
+        }
         
-        // Sync to ATProto (authenticated users use their account, guests use art account)
+        // Paintings/Pieces: Sync to ATProto immediately
         console.log("🔄 Syncing to ATProto...");
         try {
           const mediaType = type === "paintings" ? MediaTypes.PAINTING : MediaTypes.PIECE;
           
           // Fetch the full record for ATProto sync
-          const savedRecord = await collection.findOne({ _id: paintingId });
+          const savedRecord = await collection.findOne({ _id: mediaId });
           
           if (savedRecord) {
             const atprotoResult = await createMediaRecord(database, mediaType, savedRecord, { 
@@ -146,22 +258,22 @@ export async function handler(event, context) {
             } else if (atprotoResult.rkey) {
               // Update MongoDB with rkey
               await collection.updateOne(
-                { _id: paintingId },
+                { _id: mediaId },
                 { $set: { "atproto.rkey": atprotoResult.rkey } }
               );
               console.log(`✅ Synced to ATProto: ${atprotoResult.rkey}`);
             }
           }
         } catch (atprotoError) {
-          // Log the error but don't fail the request - painting is already saved
+          // Log the error but don't fail the request - media is already saved
           console.error(`⚠️  Failed to sync to ATProto:`, atprotoError);
         }
         
-        // Return code and paintingId to client
+        // Return code and mediaId to client
         return respond(200, { 
           slug, 
           code,
-          paintingId: paintingId.toString()
+          paintingId: mediaId.toString()
         });
       } catch (error) {
         console.error(`❌ Failed to insert ${type.slice(0, -1)}:`, error);
diff --git a/system/netlify/functions/track-tape.mjs b/system/netlify/functions/track-tape.mjs
deleted file mode 100644
index b24d9362b3..0000000000
--- a/system/netlify/functions/track-tape.mjs
+++ /dev/null
@@ -1,211 +0,0 @@
-// Track Tape, 25.10.17
-// POST: Create a new record in the database for a user uploaded tape (video recording).
-// Generates short codes for ALL tapes (user and guest)
-
-/* #region 🏁 TODO 
-  - [] Implement external MP4 conversion microservice
-  - [] Add retry logic for failed conversions
-#endregion */
-
-import { authorize } from "../../backend/authorization.mjs";
-import { connect } from "../../backend/database.mjs";
-import { respond } from "../../backend/http.mjs";
-import { generateUniqueCode } from "../../backend/generate-short-code.mjs";
-import { S3Client, PutObjectAclCommand } from "@aws-sdk/client-s3";
-
-const dev = process.env.CONTEXT === "dev";
-
-// MP4 conversion service endpoint (to be implemented)
-const MP4_SERVICE_URL = process.env.MP4_SERVICE_URL || "https://tape-converter.aesthetic.computer/convert";
-
-/**
- * Queue MP4 conversion job (fire-and-forget async call)
- * @param {Object} options - Conversion job parameters
- * @returns {Promise<void>}
- */
-async function queueMP4Conversion({ mongoId, bucket, slug, zipUrl, callbackUrl, metadata }) {
-  console.log(`🎬 Queueing MP4 conversion for tape ${slug} (${mongoId})`);
-  
-  try {
-    const response = await fetch(MP4_SERVICE_URL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": `Bearer ${process.env.MP4_SERVICE_TOKEN || ""}`,
-      },
-      body: JSON.stringify({
-        mongoId,
-        bucket,
-        slug,
-        zipUrl,
-        callbackUrl,
-        metadata, // Includes frameCount, totalDuration, timing data
-      }),
-    });
-    
-    if (!response.ok) {
-      throw new Error(`MP4 service returned ${response.status}: ${await response.text()}`);
-    }
-    
-    const result = await response.json();
-    console.log(`✅ MP4 conversion queued: job=${result.jobId || 'unknown'}`);
-    
-    // Update MongoDB status to "processing"
-    const database = await connect();
-    const { ObjectId } = await import("mongodb");
-    await database.db.collection("tapes").updateOne(
-      { _id: new ObjectId(mongoId) },
-      { $set: { mp4Status: "processing" } }
-    );
-    await database.disconnect();
-    
-  } catch (error) {
-    console.error(`❌ Failed to queue MP4 conversion:`, error.message);
-    // Don't throw - let the request succeed anyway
-    // Conversion can be retried manually or via cron job
-  }
-}
-
-export async function handler(event, context) {
-  if (!["POST", "PUT"].includes(event.httpMethod))
-    return respond(405, { message: "Method Not Allowed" });
-
-  let body;
-  try {
-    body = JSON.parse(event.body);
-    
-    // Try to authorize user (but don't require it for guest uploads)
-    let user;
-    try {
-      user = await authorize(event.headers);
-    } catch (authError) {
-      console.log(`🔓 Guest tape upload: ${authError.message}`);
-    }
-
-    const database = await connect();
-    const tapes = database.db.collection("tapes");
-
-    if (event.httpMethod === "POST") {
-      // POST logic for creating a new database record
-      const slug = body.slug;
-      const metadata = body.metadata || {};
-      
-      // Create indexes (safe to call multiple times)
-      await tapes.createIndex({ code: 1 }, { unique: true });
-      await tapes.createIndex({ user: 1 }, { sparse: true }); // sparse: only index docs with user field
-      await tapes.createIndex({ when: 1 });
-      await tapes.createIndex({ slug: 1 });
-      if (user) {
-        await tapes.createIndex({ slug: 1, user: 1 }, { unique: true });
-      }
-
-      // Generate unique short code (random mode for tapes)
-      const code = await generateUniqueCode(tapes, { 
-        mode: 'random',
-        type: 'tape'
-      });
-      
-      try {
-        const record = {
-          code,
-          slug,
-          when: new Date(),
-          bucket: user ? "user-aesthetic-computer" : "art-aesthetic-computer",
-          nuked: false,
-          mp4Status: "pending", // Track conversion status
-        };
-        
-        // Only add user field if authenticated (keep undefined for guests)
-        if (user) {
-          record.user = user.sub;
-        }
-        
-        const result = await tapes.insertOne(record);
-        const mongoId = result.insertedId.toString();
-        
-        const logType = user ? "user" : "guest";
-        console.log(`✅ Created ${logType} tape: slug=${slug}, code=${code}, id=${mongoId}`);
-        
-        // Make the uploaded ZIP publicly readable
-        try {
-          const s3Client = new S3Client({
-            endpoint: `https://sfo3.digitaloceanspaces.com`,
-            credentials: {
-              accessKeyId: process.env.ART_KEY || process.env.DO_SPACES_KEY,
-              secretAccessKey: process.env.ART_SECRET || process.env.DO_SPACES_SECRET,
-            },
-          });
-          
-          const key = user ? `${user.sub}/${slug}.zip` : `${slug}.zip`;
-          
-          const aclCommand = new PutObjectAclCommand({
-            Bucket: record.bucket,
-            Key: key,
-            ACL: "public-read",
-          });
-          
-          await s3Client.send(aclCommand);
-          console.log(`✅ Set public-read ACL for ${record.bucket}/${key}`);
-        } catch (aclError) {
-          console.error(`⚠️  Failed to set ACL (file is uploaded but may not be public):`, aclError.message);
-          // Don't fail the request - the file is uploaded, just not public yet
-        }
-        
-        // Queue MP4 conversion job (fire-and-forget)
-        queueMP4Conversion({
-          mongoId,
-          bucket: record.bucket,
-          slug: record.slug,
-          zipUrl: `https://${record.bucket}.sfo3.digitaloceanspaces.com/${user ? user.sub + '/' : ''}${slug}.zip`,
-          callbackUrl: `${process.env.URL}/.netlify/functions/tape-mp4-complete`,
-          metadata: metadata, // Pass through frame timing data
-        }).catch(err => {
-          console.error('❌ MP4 conversion queue error:', err);
-          // Don't fail the request - conversion can be retried
-        });
-        
-        return respond(200, { slug, code }); // Return code to client!
-      } catch (error) {
-        console.error(`❌ Failed to insert tape:`, error);
-        return respond(500, { message: error.message || String(error) });
-      } finally {
-        await database.disconnect();
-      }
-      
-    } else if (event.httpMethod === "PUT") {
-      // PUT logic for updating an existing tape record (e.g., nuking)
-      const { slug, nuke } = body;
-      if (!slug || nuke === undefined || nuke === null) {
-        return respond(400, { message: "Slug & nuke must be set for update." });
-      }
-
-      // User must be authenticated to nuke their own content
-      if (!user) {
-        return respond(401, { message: "Unauthorized - login required to nuke media" });
-      }
-
-      try {
-        const result = await tapes.updateOne(
-          { slug, user: user.sub },
-          { $set: { nuked: nuke } },
-        );
-
-        if (result.matchedCount === 0) {
-          return respond(404, { message: "Tape not found." });
-        } else if (result.modifiedCount === 1) {
-          return respond(200, { message: "Tape nuked successfully." });
-        } else {
-          return respond(200, { message: "No effect." });
-        }
-      } catch (error) {
-        console.error(`❌ Failed to nuke tape:`, error);
-        return respond(500, { message: error.message || String(error) });
-      } finally {
-        await database.disconnect();
-      }
-    }
-  } catch (error) {
-    console.error(`❌ Track tape error:`, error);
-    return respond(400, { message: error.message || "Cannot parse input body." });
-  }
-}
diff --git a/system/package-lock.json b/system/package-lock.json
index 6b9b8f7493..68c63fac05 100644
--- a/system/package-lock.json
+++ b/system/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@atproto/api": "^0.17.2",
+        "@ffmpeg-installer/ffmpeg": "^1.1.0",
         "@ffmpeg/core": "^0.12.10",
         "@ffmpeg/ffmpeg": "^0.12.15",
         "@geckos.io/client": "^3.0.2",
@@ -2101,6 +2102,132 @@
       "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
       "license": "MIT"
     },
+    "node_modules/@ffmpeg-installer/darwin-arm64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-arm64/-/darwin-arm64-4.1.5.tgz",
+      "integrity": "sha512-hYqTiP63mXz7wSQfuqfFwfLOfwwFChUedeCVKkBtl/cliaTM7/ePI9bVzfZ2c+dWu3TqCwLDRWNSJ5pqZl8otA==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "license": "https://git.ffmpeg.org/gitweb/ffmpeg.git/blob_plain/HEAD:/LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/darwin-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-x64/-/darwin-x64-4.1.0.tgz",
+      "integrity": "sha512-Z4EyG3cIFjdhlY8wI9aLUXuH8nVt7E9SlMVZtWvSPnm2sm37/yC2CwjUzyCQbJbySnef1tQwGG2Sx+uWhd9IAw==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "license": "LGPL-2.1",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/ffmpeg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/ffmpeg/-/ffmpeg-1.1.0.tgz",
+      "integrity": "sha512-Uq4rmwkdGxIa9A6Bd/VqqYbT7zqh1GrT5/rFwCwKM70b42W5gIjWeVETq6SdcL0zXqDtY081Ws/iJWhr1+xvQg==",
+      "license": "LGPL-2.1",
+      "optionalDependencies": {
+        "@ffmpeg-installer/darwin-arm64": "4.1.5",
+        "@ffmpeg-installer/darwin-x64": "4.1.0",
+        "@ffmpeg-installer/linux-arm": "4.1.3",
+        "@ffmpeg-installer/linux-arm64": "4.1.4",
+        "@ffmpeg-installer/linux-ia32": "4.1.0",
+        "@ffmpeg-installer/linux-x64": "4.1.0",
+        "@ffmpeg-installer/win32-ia32": "4.1.0",
+        "@ffmpeg-installer/win32-x64": "4.1.0"
+      }
+    },
+    "node_modules/@ffmpeg-installer/linux-arm": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm/-/linux-arm-4.1.3.tgz",
+      "integrity": "sha512-NDf5V6l8AfzZ8WzUGZ5mV8O/xMzRag2ETR6+TlGIsMHp81agx51cqpPItXPib/nAZYmo55Bl2L6/WOMI3A5YRg==",
+      "cpu": [
+        "arm"
+      ],
+      "hasInstallScript": true,
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-arm64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm64/-/linux-arm64-4.1.4.tgz",
+      "integrity": "sha512-dljEqAOD0oIM6O6DxBW9US/FkvqvQwgJ2lGHOwHDDwu/pX8+V0YsDL1xqHbj1DMX/+nP9rxw7G7gcUvGspSoKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-ia32/-/linux-ia32-4.1.0.tgz",
+      "integrity": "sha512-0LWyFQnPf+Ij9GQGD034hS6A90URNu9HCtQ5cTqo5MxOEc7Rd8gLXrJvn++UmxhU0J5RyRE9KRYstdCVUjkNOQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "hasInstallScript": true,
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-x64/-/linux-x64-4.1.0.tgz",
+      "integrity": "sha512-Y5BWhGLU/WpQjOArNIgXD3z5mxxdV8c41C+U15nsE5yF8tVcdCGet5zPs5Zy3Ta6bU7haGpIzryutqCGQA/W8A==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/win32-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-ia32/-/win32-ia32-4.1.0.tgz",
+      "integrity": "sha512-FV2D7RlaZv/lrtdhaQ4oETwoFUsUjlUiasiZLDxhEUPdNDWcH1OU9K1xTvqz+OXLdsmYelUDuBS/zkMOTtlUAw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/win32-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-x64/-/win32-x64-4.1.0.tgz",
+      "integrity": "sha512-Drt5u2vzDnIONf4ZEkKtFlbvwj6rI3kxw1Ck9fpudmtgaZIHD4ucsWB2lCZBXRxJgXR+2IMSti+4rtM4C4rXgg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "GPLv3",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@ffmpeg/core": {
       "version": "0.12.10",
       "resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.12.10.tgz",
diff --git a/system/package.json b/system/package.json
index 62ab9cc775..93186e333e 100644
--- a/system/package.json
+++ b/system/package.json
@@ -42,6 +42,7 @@
   "homepage": "https://github.com/whistlegraph/system#readme",
   "dependencies": {
     "@atproto/api": "^0.17.2",
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "@ffmpeg/core": "^0.12.10",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@geckos.io/client": "^3.0.2",
diff --git a/system/public/aesthetic.computer/bios.mjs b/system/public/aesthetic.computer/bios.mjs
index 2daa87e68f..b980a386d9 100644
--- a/system/public/aesthetic.computer/bios.mjs
+++ b/system/public/aesthetic.computer/bios.mjs
@@ -5598,7 +5598,7 @@ async function boot(parsed, bpm = 60, resolution, debug) {
         const metadata = {
           resolution: { width: originalWidth, height: originalHeight },
           frameCount: content.frames.length,
-          totalDuration: totalDuration,
+          totalDuration: totalDuration / 1000, // Convert from milliseconds to seconds
           piece: content.piece || "video",
           exportedAt: new Date().toISOString(),
           audioSampleRate: content.rawAudio?.sampleRate || null, // Store original audio sample rate
@@ -8032,6 +8032,26 @@ async function boot(parsed, bpm = 60, resolution, debug) {
       return;
     }
 
+    // 📼 Get tape information (duration, frame count, etc.)
+    if (type === "tape:get-info") {
+      const info = {
+        frameCount: recordedFrames.length,
+        totalDuration: 0,
+        hasAudio: !!window.tapeAudioArrayBuffer,
+      };
+      
+      // Calculate total duration from frame timestamps
+      if (recordedFrames.length > 1) {
+        const firstTimestamp = recordedFrames[0][0];
+        const lastTimestamp = recordedFrames[recordedFrames.length - 1][0];
+        info.totalDuration = (lastTimestamp - firstTimestamp) / 1000; // Convert to seconds
+      }
+      
+      // Reply back to the disk
+      send({ type: "tape:info-reply", content: info });
+      return;
+    }
+
     // 📼 Stop tape playback (when leaving video disk)
     if (type === "tape:stop") {
       console.log("📼 Stopping tape playback");
diff --git a/system/public/aesthetic.computer/disks/video.mjs b/system/public/aesthetic.computer/disks/video.mjs
index 0912ce0319..3c18357d26 100644
--- a/system/public/aesthetic.computer/disks/video.mjs
+++ b/system/public/aesthetic.computer/disks/video.mjs
@@ -58,6 +58,10 @@ let tapeLoadPhase = ""; // download, frames, audio
 let tapeLoadProgress = 0; // 0-1
 let tapeLoadMessage = ""; // Status message
 
+// Tape info from bios
+let tapeInfo = null; // { frameCount, totalDuration, hasAudio }
+const MAX_TAPE_DURATION = 30; // Must match server limit
+
 // API references needed by receive() function
 let apiJump = null; // Stored from boot() for use in receive()
 let apiSend = null; // Stored from boot() for sending messages to BIOS
@@ -187,6 +191,7 @@ function boot({ wipe, rec, gizmo, jump, notice, store, params, send, hud }) {
   currentExportType = "";
   printed = false;
   postedTapeCode = null; // Reset tape code from previous session
+  tapeInfo = null; // Reset tape info for new recording
   
   // Check if a tape code was passed (e.g., "video !abc")
   if (params[0] && params[0].startsWith("!")) {
@@ -287,6 +292,7 @@ function paint({
   paintCount,
   needsPaint,
   sound,
+  send,
 }) {
   if (typeof needsPaint === "function") {
     requestPaint = needsPaint;
@@ -330,8 +336,15 @@ function paint({
   if (exportAvailable) {
     const disableExports = isPrinting || isPostingTape;
 
-    // Only show POST button if tape hasn't been posted yet
-    if (!postedTapeCode) {
+    // Request tape info if we don't have it yet
+    if (tapeInfo === null) {
+      send({ type: "tape:get-info" });
+    }
+
+    // Only show POST button if tape hasn't been posted yet AND duration is within limit
+    const tapeWithinDurationLimit = !tapeInfo || (tapeInfo.totalDuration <= MAX_TAPE_DURATION);
+    
+    if (!postedTapeCode && tapeWithinDurationLimit) {
       if (!postBtn) {
         postBtn = new ui.TextButton("POST", { right: 6, bottom: 6, screen });
       }
@@ -343,8 +356,16 @@ function paint({
       postBtn.disabled = disableExports;
       postBtn.paint(api);
     } else {
-      // Hide POST button after posting (set to undefined so it's not painted)
+      // Hide POST button if already posted or tape too long
       postBtn = undefined;
+      
+      // Show warning if tape is too long
+      if (tapeInfo && tapeInfo.totalDuration > MAX_TAPE_DURATION && !postedTapeCode) {
+        ink(255, 200, 100, 200).write(
+          `Tape too long: ${tapeInfo.totalDuration.toFixed(1)}s (max ${MAX_TAPE_DURATION}s)`,
+          { right: 6, bottom: 6, size: 0.75 }
+        );
+      }
     }
 
     if (!zipBtn) {
@@ -1931,6 +1952,13 @@ function receive(e) {
     return false;
   }
 
+  // Handle tape info reply from BIOS
+  if (e.is("tape:info-reply")) {
+    console.log("📼 Received tape info:", e.content);
+    tapeInfo = e.content;
+    return true;
+  }
+
   // Handle AudioContext state updates from BIOS
   if (e.is("tape:audio-context-state")) {
     console.log("🎵 ✅ Video piece received AudioContext state:", e.content);