CAPTION VIDEO CREATOR

November 14, 2026

#vt-app{--ac:#e8bb52;--ac2:#fbe3a0;--bg:#07080d;--bd:rgba(255,255,255,.09);--bd2:rgba(232,187,82,.55);--tx:#f2efe8;--mu:#8f93a6;--gl:rgba(255,255,255,.035);--gl2:rgba(255,255,255,.07);--in:#0b0d15;max-width:1080px;margin:20px auto;background:radial-gradient(1200px 500px at 85% -10%,rgba(232,187,82,.10),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(110,90,255,.08),transparent 60%),var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:26px;padding:26px;font:14px/1.5 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.45)} #vt-app *{box-sizing:border-box} #vt-app svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #vt-app svg.vt-fill{fill:currentColor;stroke:none} #vt-app .vt-ic{display:inline-flex;pointer-events:none} /* header */ #vt-app .vt-h{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--bd);flex-wrap:wrap} #vt-app .vt-logo{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#f6d27a,#b9852a);color:#1a1204;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 24px rgba(232,187,82,.35),inset 0 1px 0 rgba(255,255,255,.5)} #vt-app .vt-logo svg{width:26px;height:26px;stroke-width:2} #vt-app .vt-ht{flex:1;min-width:200px} #vt-app .vt-ht b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.01em;background:linear-gradient(90deg,#fff,var(--ac2) 60%,var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent} #vt-app .vt-ht span{display:block;font-size:13px;color:var(--mu);margin-top:3px} #vt-app .vt-tags{display:flex;gap:8px;flex-wrap:wrap} #vt-app .vt-tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ac2);border:1px solid var(--bd2);background:rgba(232,187,82,.08);padding:6px 11px;border-radius:999px} /* layout */ #vt-app .vt-main{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)} @media(min-width:900px){#vt-app .vt-main{grid-template-columns:420px minmax(0,1fr);align-items:start}#vt-app .vt-stage{position:sticky;top:12px}} /* stage */ #vt-app .vt-stage{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0} #vt-app .vt-frame{width:100%;display:flex;justify-content:center;padding:12px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid var(--bd);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),0 0 70px rgba(232,187,82,.10)} #vt-app .vt-cv{display:block;background:#000;border-radius:20px;max-width:100%;height:auto;border:0} #vt-app .vt-dock{width:100%;background:var(--gl);border:1px solid var(--bd);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(8px)} #vt-app .vt-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;width:100%} #vt-app .vt-trans{display:flex;align-items:center;gap:12px;width:100%} #vt-app .vt-time{font-size:12px;color:var(--mu);min-width:82px;text-align:right;font-variant-numeric:tabular-nums} #vt-app .vt-st{font-size:12px;color:var(--mu);text-align:center;min-height:18px} /* buttons */ #vt-app .vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gl2);color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2;transition:transform .08s,border-color .15s,background .15s,box-shadow .15s} #vt-app .vt-btn:hover{border-color:var(--bd2);background:rgba(232,187,82,.10)} #vt-app .vt-btn:active{transform:scale(.97)} #vt-app .vt-btn[disabled]{opacity:.4;cursor:not-allowed} #vt-app .vt-pri{background:linear-gradient(135deg,#f6d27a,#d9a23c 55%,#b9852a);color:#1a1204;border-color:transparent;box-shadow:0 8px 24px rgba(232,187,82,.28)} #vt-app .vt-pri:hover{background:linear-gradient(135deg,#fbe09a,#e6b24c 55%,#c8932f);border-color:transparent;box-shadow:0 10px 30px rgba(232,187,82,.4)} #vt-app .vt-play{width:46px;height:46px;padding:0;border-radius:50%;flex:none} #vt-app .vt-play svg{width:20px;height:20px} #vt-app .vt-sm{padding:7px 12px;font-size:12px} #vt-app .vt-ctl{gap:6px} #vt-app .vt-seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%} #vt-app .vt-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} #vt-app .vt-chip{width:32px;height:32px;border-radius:10px;border:1px solid var(--bd);background:var(--gl);color:var(--mu);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0;transition:all .15s} #vt-app .vt-chip:hover{border-color:var(--bd2);color:var(--ac2)} #vt-app .vt-chip.on{border-color:transparent;background:linear-gradient(135deg,#f6d27a,#c8932f);color:#1a1204} /* seek + ranges */ #vt-app input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0;padding:0;cursor:pointer} #vt-app input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:rgba(255,255,255,.14)} #vt-app input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.14)} #vt-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#fbe09a,#d9a23c);border:2px solid #07080d;margin-top:-6.5px;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(232,187,82,.18)} #vt-app input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fbe09a,#d9a23c);border:2px solid #07080d} #vt-app input[type=range]:focus{outline:none} #vt-app input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(232,187,82,.4)} #vt-app .vt-seek{flex:1;min-width:0} /* panel + sections */ #vt-app .vt-panel{display:flex;flex-direction:column;gap:14px;min-width:0} #vt-app .vt-sec{background:var(--gl);border:1px solid var(--bd);border-radius:20px;padding:0;transition:border-color .2s} #vt-app .vt-sec[open]{border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))} #vt-app .vt-sec summary{cursor:pointer;padding:16px 18px;font-weight:600;font-size:15px;color:var(--tx);list-style:none;display:flex;align-items:center;gap:12px} #vt-app .vt-sec summary::-webkit-details-marker{display:none} #vt-app .vt-sn{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f6d27a,#b9852a);color:#1a1204;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none} #vt-app .vt-st2{flex:1;min-width:0} #vt-app .vt-chev{margin-left:auto;color:var(--mu);transition:transform .2s} #vt-app .vt-sec[open] .vt-chev{transform:rotate(180deg);color:var(--ac)} #vt-app .vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:2px 18px 20px} #vt-app .vt-full{grid-column:1/-1} /* fields */ #vt-app .vt-f{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mu);margin:0;font-weight:500} #vt-app .vt-f input[type=text],#vt-app .vt-f textarea,#vt-app select{background:var(--in);color:var(--tx);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;width:100%;transition:border-color .15s,box-shadow .15s} #vt-app select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e8bb52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer} #vt-app select option{background:#12141d;color:#f2efe8} #vt-app .vt-f input[type=text]:focus,#vt-app .vt-f textarea:focus,#vt-app select:focus{outline:none;border-color:var(--bd2);box-shadow:0 0 0 4px rgba(232,187,82,.12)} #vt-app .vt-f textarea{resize:vertical;line-height:1.6;min-height:150px} #vt-app .vt-f input[type=file]{font-size:12px;color:var(--mu);width:100%;padding:10px;border:1.5px dashed rgba(232,187,82,.35);border-radius:14px;background:rgba(232,187,82,.04);cursor:pointer} #vt-app .vt-f input[type=file]::file-selector-button{font:inherit;font-size:12px;font-weight:600;color:#1a1204;background:linear-gradient(135deg,#f6d27a,#c8932f);border:0;border-radius:999px;padding:7px 14px;margin-right:12px;cursor:pointer} #vt-app .vt-f input[type=color]{width:100%;height:42px;border:1px solid var(--bd);border-radius:12px;background:var(--in);padding:4px;cursor:pointer} #vt-app .vt-note{grid-column:1/-1;font-size:12.5px;color:var(--mu);line-height:1.7} #vt-app .vt-note b{color:var(--tx)} /* switches */ #vt-app .vt-c{flex-direction:row;align-items:center;gap:12px;color:var(--tx);font-size:13px;cursor:pointer;padding:6px 0} #vt-app .vt-c span{flex:1} #vt-app .vt-c input[type=checkbox]{-webkit-appearance:none;appearance:none;order:2;flex:none;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;cursor:pointer;margin:0;transition:background .2s} #vt-app .vt-c input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)} #vt-app .vt-c input[type=checkbox]:checked{background:linear-gradient(135deg,#f6d27a,#c8932f)} #vt-app .vt-c input[type=checkbox]:checked::after{transform:translateX(18px);background:#1a1204} #vt-app .vt-c input[type=checkbox]:focus-visible{outline:2px solid var(--ac);outline-offset:2px} /* scenes */ #vt-app .vt-rows{display:flex;flex-direction:column;gap:10px} #vt-app .vt-sr{background:var(--in);border:1px solid var(--bd);border-radius:16px;padding:12px 14px;transition:border-color .15s,box-shadow .15s} #vt-app .vt-sr.on{border-color:var(--bd2);box-shadow:0 0 0 3px rgba(232,187,82,.10)} #vt-app .vt-srh{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:10px} #vt-app .vt-n{flex:0 0 auto;width:26px;height:26px;border-radius:9px;background:var(--gl2);color:var(--ac2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center} #vt-app .vt-sr.on .vt-n{background:linear-gradient(135deg,#f6d27a,#c8932f);color:#1a1204} #vt-app .vt-srt{font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #vt-app .vt-srb{display:flex;flex-wrap:wrap;gap:8px;align-items:center} #vt-app .vt-srb select{flex:1 1 130px;min-width:0;padding:8px 32px 8px 10px;font-size:13px;width:auto} #vt-app .vt-fl{position:relative;overflow:hidden;cursor:pointer;max-width:100%} #vt-app .vt-fl input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0} #vt-app #vt-dl{width:100%;display:flex;justify-content:center} #vt-app #vt-dl .vt-btn{width:100%} #vt-app .vt-pbar{height:6px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}#vt-app .vt-pbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#c8932f,#fbe09a);transition:width .3s} #vt-app ::-webkit-scrollbar{width:10px;height:10px} #vt-app ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px} @media(max-width:560px){#vt-app{padding:14px;border-radius:20px}#vt-app .vt-ht b{font-size:21px}#vt-app .vt-grid{grid-template-columns:minmax(0,1fr);padding:2px 14px 16px}#vt-app .vt-tags{display:none}#vt-app .vt-logo{width:46px;height:46px}} (function(){ "use strict"; if(window.__vtLoaded)return; window.__vtLoaded=1; /* ---------------- data ---------------- */ var MS={ gold:[[0,"#fff6c8"],[0.32,"#f0c24f"],[0.55,"#a8711a"],[0.78,"#f6d985"],[1,"#8d5c12"]], goldHi:[[0,"#ffffff"],[0.5,"#ffeaa6"],[1,"#f4c968"]], silver:[[0,"#ffffff"],[0.36,"#cfd6e2"],[0.55,"#7f8999"],[0.78,"#e6ebf3"],[1,"#98a1b2"]], ice:[[0,"#ffffff"],[1,"#b5e6ff"]], rose:[[0,"#ffe9df"],[0.38,"#f0b6a3"],[0.58,"#b76b5a"],[0.8,"#f8d0c0"],[1,"#a35a4a"]], roseHi:[[0,"#fff3ec"],[1,"#f6c4ae"]], copper:[[0,"#ffd9ae"],[0.38,"#e48d4c"],[0.58,"#8d4418"],[0.8,"#f2a96e"],[1,"#7a3a14"]], steel:[[0,"#eef6ff"],[0.38,"#a3c8ee"],[0.58,"#4b79a8"],[0.8,"#c0def9"],[1,"#3d6794"]], steelHi:[[0,"#ffffff"],[1,"#92d2ff"]] }; var THEMES={ mgold:{n:"Liquid Gold",g:"Metallic",b1:"#0b0805",b2:"#2e1f08",b3:"#040302",tx:"#f3d27a",ac:"#e8bb52",a2:"#ffe9a8",mu:"#b9a67a",oa:"#1a1204",light:false,mt:MS.gold,ma:MS.goldHi}, msilver:{n:"Chrome Silver",g:"Metallic",b1:"#07090d",b2:"#1c2433",b3:"#030406",tx:"#e8ecf2",ac:"#cfd6e2",a2:"#ffffff",mu:"#98a1b2",oa:"#0a0d14",light:false,mt:MS.silver,ma:MS.ice}, mrose:{n:"Rose Gold",g:"Metallic",b1:"#12070a",b2:"#3d1722",b3:"#070204",tx:"#f5c7b8",ac:"#eba592",a2:"#fff1ec",mu:"#b99a98",oa:"#1a0a0d",light:false,mt:MS.rose,ma:MS.roseHi}, mcopper:{n:"Copper Bronze",g:"Metallic",b1:"#0d0704",b2:"#3b1d0c",b3:"#050201",tx:"#eaa06a",ac:"#e08a4a",a2:"#ffd9ae",mu:"#b59a85",oa:"#1a0c04",light:false,mt:MS.copper,ma:MS.goldHi}, mplat:{n:"Platinum + Gold",g:"Metallic",b1:"#05060a",b2:"#1b212e",b3:"#020204",tx:"#e8ecf2",ac:"#e8bb52",a2:"#ffe9a8",mu:"#98a1b2",oa:"#1a1204",light:false,mt:MS.silver,ma:MS.gold}, mtitan:{n:"Titanium Blue",g:"Metallic",b1:"#04080f",b2:"#10264a",b3:"#02040a",tx:"#bcd8f5",ac:"#7fb4ee",a2:"#d5ecff",mu:"#8fa6c0",oa:"#04101f",light:false,mt:MS.steel,ma:MS.steelHi}, gold:{n:"Royal Gold (flat)",g:"Classic",b1:"#0a0f1f",b2:"#1a2350",b3:"#05070d",tx:"#f6f1e7",ac:"#e0b04a",a2:"#f3d58f",mu:"#aab1c4",oa:"#0a0f1f",light:false}, neon:{n:"Midnight Neon",g:"Classic",b1:"#05050f",b2:"#1a0b3d",b3:"#020208",tx:"#ffffff",ac:"#22e6ff",a2:"#ff4df0",mu:"#b7b9d6",oa:"#050510",light:false}, paper:{n:"Paper Cream (light)",g:"Classic",b1:"#f7f1e3",b2:"#eadfc4",b3:"#d9cba8",tx:"#1c1914",ac:"#b3261e",a2:"#7a1a14",mu:"#6e6451",oa:"#ffffff",light:true}, emerald:{n:"Emerald Luxe",g:"Classic",b1:"#03120d",b2:"#0c3a2a",b3:"#020a07",tx:"#f2f0e4",ac:"#e3bd5f",a2:"#f5dfa0",mu:"#a3b8ad",oa:"#03120d",light:false}, noir:{n:"Crimson Noir",g:"Classic",b1:"#0a0a0a",b2:"#2b0b10",b3:"#050505",tx:"#ffffff",ac:"#ff3b47",a2:"#ff8a92",mu:"#b0a4a6",oa:"#ffffff",light:false}, sunset:{n:"Sunset Plum",g:"Classic",b1:"#1a0b2e",b2:"#5a1d4f",b3:"#12071f",tx:"#fff3e6",ac:"#ff9f43",a2:"#ffd08a",mu:"#cdb8c9",oa:"#1a0b2e",light:false}, clean:{n:"Clean White (light)",g:"Classic",b1:"#ffffff",b2:"#f1f3f7",b3:"#e3e7ee",tx:"#10131a",ac:"#ff4d00",a2:"#ff8a50",mu:"#667085",oa:"#ffffff",light:true} }; var THEME_KEYS=Object.keys(THEMES); var FONTS={ elegant:{n:"Elegant serif",p:'"Playfair Display",serif'}, lux:{n:"Luxury serif",p:'"Cormorant Garamond","Playfair Display",serif'}, modern:{n:"Modern sans",p:'"Poppins",sans-serif'}, sleek:{n:"Sleek Montserrat",p:'"Montserrat",sans-serif'}, impact:{n:"Bold impact",p:'"Oswald","Montserrat",sans-serif'}, classic:{n:"Classic book serif",p:'"Lora","Playfair Display",serif'} }; var GF="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Cormorant+Garamond:wght@500;700&family=Lora:wght@500;700&family=Oswald:wght@500;700&family=Poppins:wght@400;500;600&family=Montserrat:wght@500;700&display=swap"; var ANIMS=[["auto","Auto-mix (different for each scene)"],["zoomIn","Zoom in (pop)"],["zoomOut","Zoom out (settle)"],["slideLeft","Slide from left"],["slideRight","Slide from right"],["slideUp","Rise up"],["drop","Drop in"],["fade","Soft fade"],["rotate","Spin in"],["lines","Lines from both sides"],["words","Word pop"],["kinetic","Kinetic highlight"],["reveal","Typewriter wipe"]]; var AUTO=["zoomOut","lines","zoomIn","words","slideUp","kinetic","drop","reveal","slideLeft","rotate","slideRight","fade"]; var BLOCK={zoomIn:1,zoomOut:1,slideLeft:1,slideRight:1,slideUp:1,drop:1,fade:1,rotate:1}; var BR={"540":3000000,"720":6000000,"1080":12000000,"1440":20000000,"2160":40000000}; var SAMPLES={ history:{sc:"[zoomIn] Around *105 AD*, in China\n[lines] Cai Lun is credited with making the first *paper*\n[words] Along the Silk Road it reached *Europe*\n[kinetic] Still a daily *necessity* today",ti:"The *History* of Paper",cta:"Follow for more"}, quotes:{sc:"[zoomIn] Those who *keep going* always arrive\n[slideUp] Every *morning* is a new chance\n[words] Hard work makes no *noise*, only *results* speak\n[drop] Today is *yours*",ti:"Today's *Motivation*",cta:"Follow for more"} }; var SAVE=["vt-ttsv","vt-ttsp","vt-ttsfit","vt-ttstitle","vt-script","vt-title","vt-cta","vt-wm","vt-theme","vt-font","vt-aspect","vt-q","vt-fps","vt-tstyle","vt-hl","vt-pos","vt-anim","vt-cam","vt-trans","vt-fmt","vt-size","vt-speed","vt-ov","vt-mvol","vt-vvol","vt-bold","vt-cc","vt-orbs","vt-part","vt-grain","vt-vig","vt-orn","vt-border","vt-prog","vt-count","vt-guides","vt-fade","vt-sync","vt-cac","vt-ctx","vt-ultra","vt-shine","vt-bloom"]; var ST={scenes:[],total:1,t:0,playing:false,rec:false,W:720,H:1280,U:720,cfg:{},scope:"this",gm:null,music:null,voice:null,actx:null,dest:null,nodes:[],raf:0,t0:0,startT:0,recorder:null,cancel:false,parts:[],grain:null,noGuides:false,cv:null,c:null,o:{},now:0,sig:"",curI:-1,vact:null}; var fontLink=null; /* ---------------- helpers ---------------- */ function $(id){return document.getElementById(id);} function val(id,d){var e=$(id);return(e&&e.value!==undefined&&e.value!=="")?e.value:d;} function num(id,d){var n=parseFloat(val(id,d));return isNaN(n)?d:n;} function chk(id,d){var e=$(id);return e?!!e.checked:!!d;} function cl(x){return x<0?0:(x>1?1:x);} function p2(n){return(n<10?"0":"")+n;} function fmt(x){x=Math.max(0,x);var m=Math.floor(x/60),s=Math.floor(x%60);return m+":"+p2(s);} function status(m){var e=$("vt-status");if(e)e.textContent=m;} function esc(s){return String(s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");} function shortName(s){s=String(s);return s.length>16?s.slice(0,13)+"\u2026":s;} function cfg(k){return ST.cfg[k]||(ST.cfg[k]={});} var E={ oc:function(x){x=cl(x);return 1-Math.pow(1-x,3);}, ob:function(x){x=cl(x);var a=1.70158,b=a+1;return 1+b*Math.pow(x-1,3)+a*Math.pow(x-1,2);}, io:function(x){x=cl(x);return x<0.5?4*x*x*x:1-Math.pow(-2*x+2,3)/2;}, ei:function(x){x=cl(x);return x*x;} }; function rgba(h,a){var n=parseInt(h.slice(1),16);return"rgba("+((n>>16)&255)+","+((n>>8)&255)+","+(n&255)+","+a+")";} function rr(c,x,y,w,h,r){c.beginPath();c.moveTo(x+r,y);c.lineTo(x+w-r,y);c.quadraticCurveTo(x+w,y,x+w,y+r);c.lineTo(x+w,y+h-r);c.quadraticCurveTo(x+w,y+h,x+w-r,y+h);c.lineTo(x+r,y+h);c.quadraticCurveTo(x,y+h,x,y+h-r);c.lineTo(x,y+r);c.quadraticCurveTo(x,y,x+r,y);c.closePath();} function stopsGrad(g,stops){for(var i=0;i<stops.length;i++){g.addColorStop(stops[i][0],stops[i][1]);}return g;} function metal(c,stops,x,y,w,size){return stopsGrad(c.createLinearGradient(x,y-size*0.58,x+w*0.12,y+size*0.58),stops);} function themeOf(s){ var f=(s&&ST.cfg[s.key])||{},k=f.theme||val("vt-theme","mgold"),t=THEMES[k]||THEMES.mgold,o={},x; for(x in t){o[x]=t[x];} if(!f.theme&&chk("vt-cc",false)){o.ac=val("vt-cac",o.ac);o.tx=val("vt-ctx",o.tx);o.mt=null;o.ma=null;} return o; } function themeKeyOf(s){var f=(s&&ST.cfg[s.key])||{};return f.theme||val("vt-theme","mgold");} function fam(){return FONTS[val("vt-font","elegant")]||FONTS.elegant;} function fPrim(sz){return(chk("vt-bold",true)?700:500)+" "+Math.round(sz)+"px "+fam().p;} function readOpts(){ var o=ST.o; o.ts=val("vt-tstyle","shadow");o.hs=val("vt-hl","color");o.shine=chk("vt-shine",true);o.bloom=chk("vt-bloom",true); o.orbs=chk("vt-orbs",true);o.part=chk("vt-part",true);o.ultra=chk("vt-ultra",true);o.grain=chk("vt-grain",true)&&!o.ultra; o.vig=chk("vt-vig",true);o.orn=chk("vt-orn",true);o.border=chk("vt-border",true);o.prog=chk("vt-prog",true);o.count=chk("vt-count",false); o.guides=chk("vt-guides",false);o.wm=val("vt-wm","");o.trans=val("vt-trans","wipe");o.cam=val("vt-cam","auto");o.ov=num("vt-ov",50)/100; } /* ---------------- fonts ---------------- */ function ensureFonts(){ if(!document.fonts||!fontLink)return Promise.resolve(); return Promise.race([ fontLink.then(function(){ var fams=[],jobs=[]; fam().p.split(",").forEach(function(x){x=x.trim();if(x.charAt(0)==='"')fams.push(x);}); fams.forEach(function(fm){["500","700"].forEach(function(w){try{jobs.push(document.fonts.load(w+" 40px "+fm,"The History of Paper Hello 0123"));}catch(e){}});}); return Promise.all(jobs.map(function(p){return p.catch(function(){});})); }), new Promise(function(r){setTimeout(r,5000);}) ]); } /* ---------------- script and timeline ---------------- */ function parseScript(txt){ var out=[],map={},n=0; ANIMS.forEach(function(a){map[a[0].toLowerCase()]=a[0];}); String(txt).split(/\n/).forEach(function(line){ line=line.trim(); if(!line)return; var an="",dur=0,m; while((m=line.match(/^\[([^\]]+)\]\s*/))){ var tag=m[1].trim().toLowerCase(),dm=tag.match(/^(\d+(\.\d+)?)s$/); if(dm){dur=parseFloat(dm[1]);}else if(map[tag]&&tag!=="auto"){an=map[tag];} line=line.slice(m[0].length); } line=line.split("||")[0].trim(); if(!line)return; out.push({kind:"text",key:"L"+(n++),p:line,anim:an,dur:dur}); }); return out; } function buildTimeline(){ var items=[],title=val("vt-title",""),cta=val("vt-cta",""); if(title)items.push({kind:"title",key:"title",p:title,anim:"zoomOut",dur:0}); parseScript(val("vt-script","")).forEach(function(b){items.push(b);}); if(cta)items.push({kind:"cta",key:"cta",p:cta,anim:"cta",dur:0}); if(!items.length)items.push({kind:"text",key:"L0",p:"Write your script",anim:"",dur:0}); var speed=Math.max(0.3,num("vt-speed",100)/100),ai=0,ga=val("vt-anim","auto"); items.forEach(function(it){ if(it.kind==="text"){var f=ST.cfg[it.key]||{},a=it.anim||f.anim||ga;if(a==="auto"){a=AUTO[ai%AUTO.length];}ai++;it.an=a;}else{it.an=it.anim;} var chars=it.p.replace(/\*/g,"").length,base=it.kind==="text"?(1.7+chars*0.05):3.2; it.fixed=it.dur>0; it.d=it.fixed?it.dur:Math.max(2.2,Math.min(8,base))/speed; }); if(ST.tts&&chk("vt-ttsfit",true)){items.forEach(function(it){if(it.fixed)return;var c=ttsClip(it);if(c)it.d=Math.max(1.8,c.dur+(it.kind==="title"?0.7:0.8));});} if(chk("vt-sync",false)&&ST.voice&&!ST.tts){ var target=ST.voice.duration+0.8,fx=0,fl=0; items.forEach(function(it){if(it.fixed)fx+=it.d;else fl+=it.d;}); if(fl>0){var k=Math.max(0.3,(target-fx)/fl);items.forEach(function(it){if(!it.fixed)it.d=Math.max(1.2,it.d*k);});} } var t=0; items.forEach(function(it){it.start=t;it.dur=it.d;t+=it.d;}); ST.scenes=items;ST.total=Math.max(1,t); placeTTS(items);ttsNote(items); } /* ---------------- text layout ---------------- */ function layout(c,text,maxW){ var words=[],parts=String(text).split("*"); parts.forEach(function(seg,i){seg.split(/\s+/).forEach(function(w){if(w)words.push({t:w,hl:(i%2===1),i:words.length});});}); var sp=c.measureText(" ").width,lines=[],cur=null; words.forEach(function(w){ w.w=c.measureText(w.t).width; if(!cur){cur={words:[w],w:w.w};lines.push(cur);} else if(cur.w+sp+w.w<=maxW){cur.words.push(w);cur.w+=sp+w.w;} else{cur={words:[w],w:w.w};lines.push(cur);} }); var mw=0; lines.forEach(function(l){var x=-l.w/2;l.words.forEach(function(w){w.x=x;x+=w.w+sp;});if(l.w>mw)mw=l.w;}); return{lines:lines,maxw:mw,sp:sp,nw:words.length}; } function fit(c,text,fontFn,size,maxW,maxH,lk){ var lay,n=0; for(;;){ c.font=fontFn(size); lay=layout(c,text,maxW); lay.size=size;lay.lh=size*lk;lay.h=lay.lines.length*lay.lh;lay.font=fontFn(size); if((lay.maxw<=maxW*1.002&&lay.h<=maxH)||n>14||size<16)break; size*=0.92;n++; } return lay; } function kstep(dur,nW){return Math.min(0.28,Math.max(0.1,dur*0.55/Math.max(1,nW)));} function animEnd(an,nL,nW,dur){ var e=0.7; if(an==="lines")e=0.2*nL+0.5; else if(an==="words")e=0.11*nW+0.5; else if(an==="kinetic")e=kstep(dur,nW)*nW+0.3; else if(an==="reveal")e=0.45*nL+0.8; else if(an==="cta")e=0.9; return Math.min(e,dur*0.7); } function prep(){ var c=ST.c,W=ST.W,H=ST.H,U=ST.U,sc=num("vt-size",100)/100,maxW=Math.min(W*0.84,U*1.05),maxH=H*0.5; var pos=val("vt-pos","center"),cy=pos==="low"?H*0.68:(pos==="top"?H*0.3:H*0.5); ST.scenes.forEach(function(s){ var f=ST.cfg[s.key]||{},k=s.kind==="title"?1.22:(s.kind==="cta"?0.72:1),size=U*0.085*sc*k*(f.sz||1); s.P=fit(c,s.p,fPrim,size,maxW*(s.kind==="cta"?0.8:1),maxH,1.42); s.top=cy-s.P.h/2; s.end=animEnd(s.an,s.P.lines.length,s.P.nw,s.dur); }); } /* ---------------- media ---------------- */ function mReady(m){ if(!m||!m.el)return false; if(m.kind==="vid")return m.el.readyState>=2&&m.el.videoWidth>0; return m.el.complete&&m.el.naturalWidth>0; } function mediaOf(s){ var f=s&&ST.cfg[s.key],m=(f&&f.m)?f.m:ST.gm; if(!mReady(m))return null; return{el:m.el,w:m.kind==="vid"?m.el.videoWidth:m.el.naturalWidth,h:m.kind==="vid"?m.el.videoHeight:m.el.naturalHeight}; } function vidOf(s){ var f=s&&ST.cfg[s.key],m=(f&&f.m)?f.m:ST.gm; return(m&&m.kind==="vid")?m.el:null; } function loadMedia(file,cb){ var u=URL.createObjectURL(file),nm=file.name||"file"; if(/^video\//.test(file.type)){ var v=document.createElement("video"); v.muted=true;v.loop=true;v.playsInline=true;v.preload="auto";v.setAttribute("playsinline",""); v.addEventListener("seeked",function(){if(!ST.playing&&!ST.rec)draw(ST.t);}); v.onloadeddata=function(){cb({kind:"vid",el:v,name:nm});}; v.onerror=function(){cb(null);}; v.src=u; }else{ var im=new Image(); im.onload=function(){cb({kind:"img",el:im,name:nm});}; im.onerror=function(){cb(null);}; im.src=u; } } function syncVid(t,force){ var si=sceneAt(t),s=ST.scenes[si],v=vidOf(s); if(ST.vact&&ST.vact!==v){try{ST.vact.pause();}catch(e){}ST.vact=null;} if(v&&ST.playing&&(ST.vact!==v||force)){ try{v.currentTime=((t-s.start)||0)%(v.duration||1);}catch(e){} var p=v.play();if(p&&p.catch)p.catch(function(){}); ST.vact=v; } } function seekVid(t){ var s=ST.scenes[sceneAt(t)],v=vidOf(s); if(v){try{v.currentTime=Math.max(0,t-s.start)%(v.duration||1);}catch(e){}} } /* ---------------- drawing ---------------- */ function baseLayer(c,th,s,kz,alpha){ var W=ST.W,H=ST.H; c.save();c.globalAlpha=alpha; var g=stopsGrad(c.createLinearGradient(0,0,0,H),[[0,th.b1],[0.55,th.b2],[1,th.b3]]); c.fillStyle=g;c.fillRect(0,0,W,H); var m=mediaOf(s); if(m){ var z=1.04+0.08*kz,r=Math.max(W/m.w,H/m.h)*z; c.drawImage(m.el,(W-m.w*r)/2,(H-m.h*r)/2,m.w*r,m.h*r); c.globalAlpha=alpha*ST.o.ov;c.fillStyle=th.b1;c.fillRect(0,0,W,H); } c.restore(); } function drawBG(c,t,si,tl,th){ var W=ST.W,H=ST.H,U=ST.U,o=ST.o,s=ST.scenes[si],i; if(s&&si>0&&tl<0.5&&o.trans!=="flash"){ var ps=ST.scenes[si-1]; baseLayer(c,themeOf(ps),ps,1,1); baseLayer(c,th,s,cl(tl/s.dur),E.io(tl/0.5)); }else{baseLayer(c,th,s,s?cl(tl/s.dur):0,1);} if(o.orbs){ var cols=[th.ac,th.a2,th.tx]; for(i=0;i<3;i++){ var x=W*(0.5+0.4*Math.sin(t*0.23+i*2.1)),y=H*(0.5+0.38*Math.cos(t*0.19+i*1.7)),r2=U*(0.75+0.12*i); var rg=c.createRadialGradient(x,y,0,x,y,r2); rg.addColorStop(0,rgba(cols[i],i===2?0.07:0.2));rg.addColorStop(1,rgba(cols[i],0)); c.fillStyle=rg;c.fillRect(0,0,W,H); } } if(th.mt){ var sp=((t*0.1)%1.7-0.35)*W,sg=c.createLinearGradient(sp-W*0.3,0,sp+W*0.3,H*0.7); sg.addColorStop(0,rgba(th.a2,0));sg.addColorStop(0.5,rgba(th.a2,0.09));sg.addColorStop(1,rgba(th.a2,0)); c.fillStyle=sg;c.fillRect(0,0,W,H); } if(o.part){ for(i=0;i<ST.parts.length;i++){ var p=ST.parts[i],yy=((p.y-t*p.v*0.05)%1+1)%1,xx=p.x+0.02*Math.sin(t*0.6+p.ph),al=0.12+0.4*(0.5+0.5*Math.sin(t*1.6+p.ph)); c.fillStyle=rgba(th.ac,al);c.beginPath();c.arc(xx*W,yy*H,Math.max(1,p.r*U*0.0045),0,6.2832);c.fill(); } } if(o.grain&&ST.grain){ var f=Math.floor(t*24),gs=Math.max(1,U/504); c.save();c.globalAlpha=th.light?0.05:0.07;c.scale(gs,gs);c.translate((f%7)*19,(f%5)*23);c.fillStyle=ST.grain;c.fillRect(-130,-130,W/gs+130,H/gs+130);c.restore(); } if(o.vig){ var vg=c.createRadialGradient(W/2,H/2,Math.min(W,H)*0.35,W/2,H/2,Math.max(W,H)*0.75); vg.addColorStop(0,"rgba(0,0,0,0)");vg.addColorStop(1,th.light?"rgba(80,60,30,0.22)":"rgba(0,0,0,0.6)"); c.fillStyle=vg;c.fillRect(0,0,W,H); } } function st(an,lt,li,wi,nL,nW,dur){ var W=ST.W,H=ST.H,o={a:1,s:1,tx:0,ty:0,r:0,cur:false},p,d; switch(an){ case"zoomIn":o.a=cl(lt/0.4);o.s=0.35+0.65*E.ob(lt/0.9);break; case"zoomOut":o.a=cl(lt/0.5);o.s=1+0.9*(1-E.oc(lt/1.1));break; case"slideLeft":o.a=cl(lt/0.4);o.tx=-W*0.45*(1-E.oc(lt/0.8));break; case"slideRight":o.a=cl(lt/0.4);o.tx=W*0.45*(1-E.oc(lt/0.8));break; case"slideUp":o.a=cl(lt/0.5);o.ty=H*0.08*(1-E.oc(lt/0.8));break; case"drop":o.a=cl(lt/0.3);o.ty=-H*0.12*(1-E.ob(lt/0.9));o.r=-0.14*(1-E.oc(lt/0.9));break; case"fade":o.a=cl(lt/0.9);o.s=0.96+0.04*E.oc(lt/1.2);break; case"rotate":o.a=cl(lt/0.4);o.r=0.6*(1-E.oc(lt));o.s=0.5+0.5*E.ob(lt);break; case"lines":p=(lt-li*0.2)/0.7;o.a=cl(p*1.6);o.tx=(li%2?1:-1)*W*0.5*(1-E.oc(p));break; case"words":p=(lt-wi*0.11)/0.55;o.a=cl(p*2);o.s=0.3+0.7*E.ob(p);o.ty=H*0.02*(1-E.oc(p));break; case"kinetic":d=kstep(dur,nW);p=lt-wi*d-0.1;o.a=p>=0?1:0;o.s=p>=0?(0.9+0.1*E.ob(p/0.25)):1;if(p>=0&&p<d*1.3){o.cur=true;o.s*=1.1;}break; default:o.a=cl(lt/0.6); } return o; } function paintWord(c,w,x,y,P,th,mode){ var U=ST.U,o=ST.o,fill=th.tx,hi=w.hl||mode==="cur",stops=th.mt||null; c.font=P.font;c.textAlign="left";c.textBaseline="middle"; if(mode==="cta"){fill=th.oa;stops=null;} else if(w.hl&&o.hs==="box"){ var pd=P.size*0.14;rr(c,x-pd,y-P.size*0.64,w.w+pd*2,P.size*1.28,P.size*0.22); c.fillStyle=th.ma?metal(c,th.ma,x-pd,y,w.w+pd*2,P.size*1.2):th.ac;c.fill();fill=th.oa;stops=null; } else if(hi){fill=th.ac;stops=th.ma||null;} if(mode!=="cta"){ if(o.ts==="shadow"){c.shadowColor=th.light?"rgba(0,0,0,0.18)":"rgba(0,0,0,0.55)";c.shadowBlur=U*0.02;c.shadowOffsetY=U*0.006;} else if(o.ts==="glow"){c.shadowColor=th.ac;c.shadowBlur=U*0.045;} else if(o.ts==="outline"){c.lineJoin="round";c.lineWidth=P.size*0.1;c.strokeStyle=th.light?"rgba(255,255,255,0.9)":"rgba(0,0,0,0.75)";c.strokeText(w.t,x,y);} } c.fillStyle=stops?metal(c,stops,x,y,w.w,P.size):fill; c.fillText(w.t,x,y); if(stops&&o.shine&&mode!=="cta"){ c.shadowColor="rgba(0,0,0,0)";c.shadowBlur=0;c.shadowOffsetY=0; var cx=((ST.now*0.3)%1.7-0.35)*ST.W,b=ST.W*0.09,g=c.createLinearGradient(cx-b,y-P.size,cx+b,y+P.size*0.2); g.addColorStop(0,"rgba(255,255,255,0)");g.addColorStop(0.5,"rgba(255,255,255,0.8)");g.addColorStop(1,"rgba(255,255,255,0)"); c.fillStyle=g;c.fillText(w.t,x,y); } } function drawPrimary(c,s,lt,th){ var W=ST.W,P=s.P,an=s.an,nL=P.lines.length; P.lines.forEach(function(L,li){ var ly=s.top+li*P.lh+P.lh/2; if(an==="reveal"){ var p=E.io((lt-li*0.45)/0.8); if(p<=0)return; c.save();c.beginPath();c.rect(W/2-L.w/2-P.size*0.2,ly-P.lh/2,(L.w+P.size*0.4)*p,P.lh);c.clip(); L.words.forEach(function(w){paintWord(c,w,W/2+w.x,ly,P,th,"norm");}); c.restore(); if(p<1){c.fillStyle=th.ac;c.fillRect(W/2-L.w/2+L.w*p,ly-P.size*0.5,Math.max(3,P.size*0.06),P.size);} return; } L.words.forEach(function(w){ var o=st(an,lt,li,w.i,nL,P.nw,s.dur); if(o.a<=0.002)return; var ox,oy; if(BLOCK[an]){ox=W/2;oy=s.top+P.h/2;}else{ox=W/2+w.x+w.w/2;oy=ly;} c.save(); c.globalAlpha*=o.a; c.translate(ox+o.tx,oy+o.ty);c.rotate(o.r);c.scale(o.s,o.s);c.translate(-ox,-oy); paintWord(c,w,W/2+w.x,ly,P,th,o.cur?"cur":"norm"); c.restore(); }); }); } function drawCta(c,s,lt,th){ var W=ST.W,P=s.P,sc=0.4+0.6*E.ob(lt/0.8),pu=lt>0.9?1+0.035*Math.sin((lt-0.9)*6):1,a=cl(lt/0.3); var cx=W/2,cy=s.top+P.h/2,pw=P.maxw+P.size*1.4,ph=P.h+P.size*0.7; c.save();c.globalAlpha*=a; c.translate(cx,cy);c.scale(sc*pu,sc*pu);c.translate(-cx,-cy); rr(c,cx-pw/2,cy-ph/2,pw,ph,ph/2); c.fillStyle=th.ma?stopsGrad(c.createLinearGradient(cx-pw/2,cy-ph/2,cx+pw/2,cy+ph/2),th.ma):th.ac; c.fill(); P.lines.forEach(function(L,li){var ly=s.top+li*P.lh+P.lh/2;L.words.forEach(function(w){paintWord(c,w,cx+w.x,ly,P,th,"cta");});}); c.restore(); } function drawBloom(c,s,th){ var W=ST.W,P=s.P,cy=s.top+P.h/2,r=Math.max(P.maxw*0.7,P.h*1.2,ST.U*0.3); var g=c.createRadialGradient(W/2,cy,0,W/2,cy,r); g.addColorStop(0,rgba(th.ac,0.16));g.addColorStop(1,rgba(th.ac,0)); c.fillStyle=g;c.fillRect(W/2-r,cy-r,r*2,r*2); } function drawScene(c,s,i,tl,th){ var W=ST.W,H=ST.H,U=ST.U,P=s.P,dur=s.dur,o=ST.o,tr=o.trans; var lead=(tr==="wipe"&&i>0)?0.22:0,lt=Math.max(0,tl-lead),a=1,xs=1,ex=0.4; if(tl>dur-ex){var q=cl((tl-(dur-ex))/ex);a=1-E.ei(q);xs=1+0.03*q;} var cm=o.cam,ks=0.06,kk=1; if(cm!=="off"){var din=cm==="in"?true:(cm==="out"?false:(i%2===0)),f=cl(tl/dur);kk=din?1+ks*f:1+ks*(1-f);} c_scene(c,s,i,tl,th,lt,a,xs,kk); if(tr==="wipe"&&i>0&&tl<0.55){ var p=tl/0.55,bw=W*0.22,x=-bw+(W+bw)*E.io(p); c.fillStyle=th.ac;c.fillRect(x,0,bw,H); c.globalAlpha=0.4;c.fillRect(x-bw*0.6,0,bw*0.35,H);c.globalAlpha=1; } if(tr==="flash"&&i>0&&tl<0.18){c.globalAlpha=(1-tl/0.18)*0.35;c.fillStyle="#ffffff";c.fillRect(0,0,W,H);c.globalAlpha=1;} } function c_scene(c,s,i,tl,th,lt,a,xs,kk){ var W=ST.W,H=ST.H,U=ST.U,P=s.P,o=ST.o; c.save(); c.globalAlpha=a; c.translate(W/2,H/2);c.scale(kk*xs,kk*xs);c.translate(-W/2,-H/2); if(o.bloom)drawBloom(c,s,th); if(o.orn&&s.kind!=="cta"&&P.lines.length){ var ow=U*(s.kind==="title"?0.16:0.09)*E.oc(lt/0.9); c.fillStyle=th.ac;c.fillRect(W/2-ow/2,s.top-P.size*0.75,ow,Math.max(2,U*0.005)); } if(s.kind==="cta")drawCta(c,s,lt,th);else drawPrimary(c,s,lt,th); c.restore(); } function drawHUD(c,t,si,th){ var W=ST.W,H=ST.H,U=ST.U,o=ST.o,m=U*0.035,n=ST.scenes.length,i; if(o.border){ c.save();c.lineWidth=Math.max(1.5,U*0.002); if(th.ma){c.globalAlpha=0.6;c.strokeStyle=stopsGrad(c.createLinearGradient(0,0,W,H),th.ma);}else{c.strokeStyle=rgba(th.ac,0.38);} c.strokeRect(m,m,W-2*m,H-2*m);c.restore(); } c.font="500 "+Math.round(U*0.026)+"px "+fam().p;c.textBaseline="middle";c.fillStyle=th.mu; if(o.count){c.textAlign="left";c.fillText(p2(si+1)+" / "+p2(n),m*2,m*2.1);} if(o.wm){c.textAlign="right";c.fillText(o.wm,W-m*2,m*2.1);} if(o.prog&&n>0){ var y=H-m*2,hh=Math.max(3,U*0.006),gp=U*0.01,x0=m*2,tw=W-m*4,sw=(tw-gp*(n-1))/n; for(i=0;i<n;i++){ var s=ST.scenes[i],x=x0+i*(sw+gp); c.fillStyle=rgba(th.tx,0.2);c.fillRect(x,y,sw,hh); var f=cl((t-s.start)/s.dur); if(f>0){c.fillStyle=th.ac;c.fillRect(x,y,sw*f,hh);} } } if(o.guides&&!ST.rec&&!ST.noGuides){ c.save();c.setLineDash([12,10]);c.lineWidth=2;c.strokeStyle="rgba(255,60,120,0.8)"; c.strokeRect(W*0.06,H*0.12,W*0.88,H*0.66);c.restore(); } } function sceneAt(t){var r=0,i;for(i=0;i<ST.scenes.length;i++){if(ST.scenes[i].start<=t+1e-6)r=i;}return r;} function draw(t){ if(!ST.c)return; var c=ST.c; t=Math.max(0,Math.min(t,ST.total)); ST.now=t;readOpts(); var si=sceneAt(t),s=ST.scenes[si],th=themeOf(s),tl=s?t-s.start:0; c.save();c.globalAlpha=1; c.imageSmoothingEnabled=true; try{c.imageSmoothingQuality=ST.o.ultra?"high":"medium";}catch(e){} drawBG(c,t,si,tl,th); if(s)drawScene(c,s,si,tl,th); drawHUD(c,t,si,th); c.restore(); } /* ---------------- state and UI sync ---------------- */ function info(){ var i=sceneAt(ST.t),s=ST.scenes[i],f=(s&&ST.cfg[s.key])||{},th=THEMES[themeKeyOf(s)]||THEMES.mgold,e=$("vt-info"); var txt="Scene "+(i+1)+" / "+ST.scenes.length+" \u00b7 "+th.n+" \u00b7 text "+Math.round(num("vt-size",100)*(f.sz||1))+"%"; if(e&&e.textContent!==txt)e.textContent=txt; if(ST.curI!==i&&document.querySelectorAll){ ST.curI=i; var rows=document.querySelectorAll("#vt-scenes .vt-sr"),cs=document.querySelectorAll("#vt-chips .vt-chip"),k; for(k=0;k<rows.length;k++){rows[k].className="vt-sr"+(k===i?" on":"");} for(k=0;k<cs.length;k++){cs[k].className="vt-chip"+(k===i?" on":"");} } } function setT(t,skipSeek){ ST.t=t; var sk=$("vt-seek");if(sk&&!skipSeek)sk.value=Math.round(t/ST.total*1000); var tm=$("vt-time");if(tm)tm.textContent=fmt(t)+" / "+fmt(ST.total); info(); } function dims(exp){ var qv=+val("vt-q",1080),q=exp?qv:Math.min(qv,720),a=val("vt-aspect","9:16"),W,H; if(a==="9:16"){W=q;H=q*16/9;}else if(a==="1:1"){W=q;H=q;}else if(a==="4:5"){W=q;H=q*1.25;}else{H=q;W=q*16/9;} return[Math.round(W/2)*2,Math.round(H/2)*2]; } function setSize(exp){ var d=dims(exp); ST.W=d[0];ST.H=d[1];ST.U=Math.min(d[0],d[1]*0.7); ST.cv.width=d[0];ST.cv.height=d[1]; var pv=dims(false); ST.cv.style.width="min(100%,"+Math.round(620*pv[0]/pv[1])+"px)"; } function chips(){ var h="",e=$("vt-chips"); ST.scenes.forEach(function(s,i){h+='<button class="vt-chip" data-i="'+i+'" title="Scene '+(i+1)+'">'+(i+1)+"</button>";}); if(e)e.innerHTML=h; ST.curI=-1; } function themeOpts(sel,withGlobal){ var h=withGlobal?'<option value=""'+(sel===""?" selected":"")+">Same as global theme</option>":""; ["Metallic","Classic"].forEach(function(g){ h+='<optgroup label="'+g+'">'; THEME_KEYS.forEach(function(k){if(THEMES[k].g===g)h+='<option value="'+k+'"'+(k===sel?" selected":"")+">"+THEMES[k].n+"</option>";}); h+="</optgroup>"; }); return h; } function animOpts(sel){ var h='<option value=""'+(sel===""?" selected":"")+">Animation: global</option>"; ANIMS.forEach(function(a){if(a[0]!=="auto")h+='<option value="'+a[0]+'"'+(a[0]===sel?" selected":"")+">"+a[1]+"</option>";}); return h; } function listScenes(){ var sig=ST.scenes.map(function(s){var f=ST.cfg[s.key]||{};return s.key+"|"+s.p+"|"+(f.theme||"")+"|"+(f.anim||"")+"|"+(f.m?f.m.name:"")+"|"+(f.sz||1);}).join("~"); if(sig===ST.sig)return; ST.sig=sig; var e=$("vt-scenes");if(!e)return; var h=""; ST.scenes.forEach(function(s,i){ var f=ST.cfg[s.key]||{},pv=s.p.replace(/\*/g,""); if(pv.length>40)pv=pv.slice(0,38)+"\u2026"; h+='<div class="vt-sr" data-k="'+s.key+'" data-i="'+i+'"><div class="vt-srh"><span class="vt-n">'+(i+1)+'</span><span class="vt-srt">'+esc(pv)+"</span></div><div class=\"vt-srb\">"; h+='<select data-f="theme" aria-label="Theme for scene '+(i+1)+'">'+themeOpts(f.theme||"",true)+"</select>"; h+='<button class="vt-btn vt-sm" data-a="rnd" title="Random theme for this scene" aria-label="Random theme">'+ICO.shuf+'</button>'; if(s.kind==="text")h+='<select data-f="anim" aria-label="Animation for scene '+(i+1)+'">'+animOpts(f.anim||"")+"</select>"; h+='<label class="vt-btn vt-sm vt-fl">'+ICO.img+'<span>'+(f.m?esc(shortName(f.m.name)):"Background")+'</span><input type="file" data-f="bg" accept="image/*,video/*"></label>'; if(f.m)h+='<button class="vt-btn vt-sm" data-a="clrbg" title="Remove this background" aria-label="Remove background">'+ICO.x+'</button>'; h+="</div></div>"; }); e.innerHTML=h; ST.curI=-1; } function rebuild(){ buildTimeline();prep();listScenes();chips(); if(ST.t>ST.total)ST.t=ST.total; setT(ST.t); var d=dims(true),mp=val("vt-fmt","mp4")==="mp4"?"MP4":"WebM"; status(ST.scenes.length+" scenes \u00b7 "+fmt(ST.total)+" \u00b7 export "+d[0]+"\u00d7"+d[1]+" "+mp); } function setPlayLabel(){var b=$("vt-play");if(b){b.innerHTML=ST.playing?ICO.pause:ICO.play;b.setAttribute("aria-label",ST.playing?"Pause":"Play");}} function setBusy(b){ var r=$("vt-rec"),p=$("vt-play"),x=$("vt-cancel"),pn=$("vt-panel"); if(r)r.disabled=b;if(p)p.disabled=b;if(x)x.style.display=b?"inline-block":"none"; if(pn){pn.style.pointerEvents=b?"none":"";pn.style.opacity=b?"0.5":"";} } /* ---------------- scene and preview controls ---------------- */ function pickTheme(key,avoid){ var f=cfg(key),cur=f.theme||val("vt-theme","mgold"),k,n=0; do{k=THEME_KEYS[Math.floor(Math.random()*THEME_KEYS.length)];n++;}while((k===cur||k===avoid)&&n<30); return k; } function randomAll(){ var prev=""; ST.scenes.forEach(function(s){var k=pickTheme(s.key,prev);cfg(s.key).theme=k;prev=k;}); } function afterCfg(){saveAll();rebuild();draw(ST.t);} function jumpTo(i){ var s=ST.scenes[+i]; if(!s||ST.rec)return; stopPlay(); var t=s.start+Math.min(s.dur-0.4,s.end+0.6); setT(t);seekVid(t);draw(t); } function curScene(){return ST.scenes[sceneAt(ST.t)];} function nextKey(cur,d){var i=THEME_KEYS.indexOf(cur);if(i<0)i=0;return THEME_KEYS[(i+d+THEME_KEYS.length)%THEME_KEYS.length];} function resizeText(dir){ if(ST.rec)return; if(ST.scope==="all"){var e=$("vt-size"),mn=+e.min,mx=+e.max;e.value=Math.max(mn,Math.min(mx,(+e.value)+dir*8));} else{var s=curScene(),f=cfg(s.key);f.sz=Math.max(0.5,Math.min(1.9,(f.sz||1)*(dir>0?1.1:1/1.1)));} afterCfg(); } function nextTheme(){ if(ST.rec)return; if(ST.scope==="all"){ var e=$("vt-theme");e.value=nextKey(e.value,1); ST.scenes.forEach(function(s){delete cfg(s.key).theme;}); }else{var s=curScene(),f=cfg(s.key);f.theme=nextKey(f.theme||val("vt-theme","mgold"),1);} afterCfg(); } function randomTheme(){ if(ST.rec)return; if(ST.scope==="all")randomAll(); else{var s=curScene();cfg(s.key).theme=pickTheme(s.key,"");} afterCfg(); } function sceneEv(e){ if(ST.rec)return; var t=e.target,row=t.closest?t.closest(".vt-sr"):null; if(!row)return; var key=row.getAttribute("data-k"),f=cfg(key),fld=t.getAttribute("data-f"); if(e.type==="change"){ if(fld==="theme"){f.theme=t.value;} else if(fld==="anim"){f.anim=t.value;} else if(fld==="bg"){ var file=t.files&&t.files[0];if(!file)return; loadMedia(file,function(m){if(!m){alert("Could not open this file. Try JPG, PNG, MP4 or WebM.");return;}f.m=m;afterCfg();}); return; }else return; afterCfg(); }else if(e.type==="click"){ var b=t.closest("button"),act=b?b.getAttribute("data-a"):null; if(act==="rnd"){f.theme=pickTheme(key,"");afterCfg();} else if(act==="clrbg"){delete f.m;afterCfg();} else if(t.closest(".vt-srh")){jumpTo(row.getAttribute("data-i"));} } } /* ---------------- audio ---------------- */ function actx(){if(!ST.actx){var A=window.AudioContext||window.webkitAudioContext;ST.actx=new A();}return ST.actx;} function loadAudio(file,cb){ var fr=new FileReader(); fr.onload=function(){ try{actx().decodeAudioData(fr.result,function(b){cb(b);},function(){alert("Could not read this audio file. Try MP3 or WAV.");});} catch(e){alert("Audio is not supported in this browser.");} }; fr.readAsArrayBuffer(file); } function stopAudio(){ST.nodes.forEach(function(n){try{n.stop();}catch(e){}});ST.nodes=[];} function startAudio(from){ stopAudio(); if(!ST.music&&!ST.voice)return; var ac=actx(); if(ac.state==="suspended")ac.resume(); var out=ac.createGain();out.connect(ac.destination); if(ST.dest)out.connect(ST.dest); var now=ac.currentTime,left=Math.max(0.1,ST.total-from); if(ST.music){ var s=ac.createBufferSource(),g=ac.createGain(),mv=num("vt-mvol",60)/100; s.buffer=ST.music;s.loop=true; g.gain.setValueAtTime(mv,now); if(chk("vt-fade",true)){g.gain.setValueAtTime(mv,now+Math.max(0,left-2));g.gain.linearRampToValueAtTime(0.0001,now+left);} s.connect(g);g.connect(out);s.start(0,from%ST.music.duration);ST.nodes.push(s); } if(ST.voice&&from<ST.voice.duration){ var v=ac.createBufferSource(),vg=ac.createGain(); v.buffer=ST.voice;vg.gain.value=num("vt-vvol",100)/100; v.connect(vg);vg.connect(out);v.start(0,from);ST.nodes.push(v); } } /* ---------------- playback ---------------- */ function tick(){ if(!ST.playing)return; var t=ST.startT+(performance.now()-ST.t0)/1000; if(t>=ST.total){draw(ST.total);setT(ST.total);onEnd();return;} syncVid(t,false);draw(t);setT(t); if(ST.rec)status("Recording\u2026 "+Math.round(t/ST.total*100)+"% (keep this tab open and visible)"); ST.raf=requestAnimationFrame(tick); } function startPlay(from){ if(ST.playing)return; startAudio(from); ST.playing=true;ST.startT=from;ST.t0=performance.now(); syncVid(from,true); setPlayLabel(); ST.raf=requestAnimationFrame(tick); } function stopPlay(){ ST.playing=false; if(ST.raf){cancelAnimationFrame(ST.raf);ST.raf=0;} stopAudio(); if(ST.vact){try{ST.vact.pause();}catch(e){}ST.vact=null;} setPlayLabel(); } function onEnd(){ stopPlay(); if(ST.rec&&ST.recorder){setTimeout(function(){try{ST.recorder.stop();}catch(e){}},400);} } /* ---------------- recording and export ---------------- */ function pickMime(){ var f=val("vt-fmt","mp4"); var web=["video/webm;codecs=vp9,opus","video/webm;codecs=vp8,opus","video/webm"]; var mp=["video/mp4;codecs=avc1.640034,mp4a.40.2","video/mp4;codecs=avc1.640033,mp4a.40.2","video/mp4;codecs=avc1.64002A,mp4a.40.2","video/mp4;codecs=avc1,mp4a.40.2","video/mp4;codecs=avc1","video/mp4"]; var c=f==="webm"?web:mp.concat(web); for(var i=0;i<c.length;i++){try{if(MediaRecorder.isTypeSupported(c[i]))return c[i];}catch(e){}} return""; } function bench(fps){ var t=ST.total*0.4,i,t0; draw(t);draw(t); t0=performance.now(); for(i=0;i<5;i++)draw(t+i*0.02); try{ST.c.getImageData(0,0,1,1);}catch(e){} return(performance.now()-t0)/5>(1000/fps)*1.15; } function endRecordUI(){ ST.rec=false;ST.recorder=null;ST.dest=null; setSize(false);ST.t=0;rebuild();draw(0);setBusy(false); } function startRecord(){ if(ST.rec)return; if(typeof MediaRecorder==="undefined"||!ST.cv.captureStream){alert("Recording needs a recent Chrome or Edge (a computer works best).");return;} stopPlay();setBusy(true);status("Preparing\u2026"); ensureFonts().then(function(){ var d=dims(true),fps=+val("vt-fps",30); setSize(true);rebuild(); if(bench(fps)&&!confirm("This device may be too slow to record "+d[0]+"\u00d7"+d[1]+" smoothly, and the video could stutter. Continue anyway?\n\nTip: choose a lower quality in Look and animation.")){ setSize(false);rebuild();draw(ST.t);setBusy(false);status("Cancelled.");return; } var stream=ST.cv.captureStream(fps); ST.dest=null; if(ST.music||ST.voice){var ac=actx();ST.dest=ac.createMediaStreamDestination();ST.dest.stream.getAudioTracks().forEach(function(tr){stream.addTrack(tr);});} var mime=pickMime(),br=(BR[val("vt-q","1080")]||12000000)*(ST.o.ultra?1.5:1)*(fps>30?1.4:1); var opts={videoBitsPerSecond:Math.min(100000000,Math.round(br)),audioBitsPerSecond:192000},rec; if(mime)opts.mimeType=mime; try{rec=new MediaRecorder(stream,opts);}catch(e){try{rec=new MediaRecorder(stream);}catch(e2){endRecordUI();alert("This browser could not start recording.");return;}} var chunks=[]; ST.cancel=false; rec.ondataavailable=function(e){if(e.data&&e.data.size)chunks.push(e.data);}; rec.onstop=function(){ var type=rec.mimeType||mime||"video/webm",blob=new Blob(chunks,{type:type}),ext=/mp4/.test(type)?"mp4":"webm",cancelled=ST.cancel; endRecordUI(); if(cancelled){status("Recording cancelled.");return;} var url=URL.createObjectURL(blob),name="video-"+Date.now()+"."+ext; $("vt-dl").innerHTML='<a class="vt-btn vt-pri" href="'+url+'" download="'+name+'">'+ICO.dl+'Download '+ext.toUpperCase()+" \u00b7 "+d[0]+"\u00d7"+d[1]+" ("+(blob.size/1048576).toFixed(1)+" MB)</a>"; var a=document.createElement("a");a.href=url;a.download=name;document.body.appendChild(a);a.click();document.body.removeChild(a); status(ext==="webm"&&val("vt-fmt","mp4")==="mp4"?"Saved as WebM because this browser cannot record MP4. Use Chrome 126+ or Edge on a computer for MP4.":"Done! If the download did not start, tap the button above."); }; ST.rec=true;ST.recorder=rec;$("vt-dl").innerHTML=""; rec.start(500); ST.t=0;setT(0);draw(0); startPlay(0); }); } function cancelRecord(){ ST.cancel=true;stopPlay(); if(ST.recorder){try{ST.recorder.stop();}catch(e){}} } function savePng(){ stopPlay();ST.noGuides=true;draw(ST.t); ST.cv.toBlob(function(b){ if(!b)return; var a=document.createElement("a");a.href=URL.createObjectURL(b);a.download="frame-"+Date.now()+".png"; document.body.appendChild(a);a.click();document.body.removeChild(a); },"image/png"); ST.noGuides=false;draw(ST.t); } /* ---------------- AI voice from text ---------------- */ var TTS_VOICES=[["af_heart","Heart - US female, warm"],["af_bella","Bella - US female, expressive"],["af_nicole","Nicole - US female, calm"],["af_sarah","Sarah - US female, clear"],["am_michael","Michael - US male, natural"],["am_adam","Adam - US male, deep"],["am_fenrir","Fenrir - US male, strong"],["bf_emma","Emma - UK female"],["bm_george","George - UK male"],["bm_daniel","Daniel - UK male, smooth"]]; var TTS_HINT="Turns each script line into spoken narration and fits the scene timing to it. The first time, a voice model (about 90 MB) downloads and is then saved in your browser. Works best in recent Chrome or Edge on a computer. English voices."; function narrText(it){ if(it.kind==="text"||(it.kind==="title"&&chk("vt-ttstitle",true)))return String(it.p).replace(/\*/g,"").replace(/\s+/g," ").trim(); return ""; } function ttsKey(t){return val("vt-ttsv","af_heart")+"|"+num("vt-ttsp",100)+"|"+t;} function ttsClip(it){ if(!ST.tts)return null; var t=narrText(it);if(!t)return null; return ST.tts.clips[ttsKey(t)]||null; } function ttsNote(items){ var e=$("vt-ttsn");if(!e||ST.ttsBusy)return; if(!ST.tts){e.textContent=TTS_HINT;return;} var need=0,have=0; items.forEach(function(it){if(narrText(it)){if(ttsClip(it))have++;else need++;}}); e.textContent=need?"Script or voice settings changed. Tap Generate voice to update ("+need+" line"+(need===1?"":"s")+" missing).":"AI voice ready for "+have+" line"+(have===1?"":"s")+". Press Play to listen, or record the video to include it."; } function placeTTS(items){ if(!ST.tts)return; var SR=24000,sig=ST.total.toFixed(2)+"~"+items.map(function(it){var c=ttsClip(it);return it.start.toFixed(2)+(c?c.id:"-");}).join("|"); if(sig===ST.ttsSig&&ST.voice)return; var ac;try{ac=actx();}catch(e){return;} var buf=ac.createBuffer(1,Math.ceil((ST.total+1)*SR),SR),d=buf.getChannelData(0); items.forEach(function(it){ var c=ttsClip(it);if(!c)return; var off=Math.round((it.start+0.15)*SR),src=c.data; if(c.sr!==SR){var n=Math.round(src.length*SR/c.sr),r=new Float32Array(n),i;for(i=0;i<n;i++){r[i]=src[Math.min(src.length-1,Math.floor(i*c.sr/SR))];}src=r;} if(off<d.length)d.set(src.subarray(0,Math.min(src.length,d.length-off)),off); }); ST.voice=buf;ST.ttsSig=sig; } function ttsStatus(m,pct){ var e=$("vt-ttsn");if(e)e.textContent=m; var b=$("vt-ttsbar");if(b)b.style.width=(pct||0)+"%"; } function loadEngine(prog){ if(ST.engine)return ST.engine; ST.engine=(async function(){ if(window.__VT_TTS_FACTORY)return window.__VT_TTS_FACTORY(); var urls=["https://cdn.jsdelivr.net/npm/kokoro-js@1.2.1/dist/kokoro.web.js","https://esm.sh/kokoro-js@1.2.1"],mod=null,i; for(i=0;i<urls.length&&!(mod&&mod.KokoroTTS);i++){try{mod=await import(urls[i]);}catch(e){mod=null;}} if(!mod||!mod.KokoroTTS)throw new Error("Could not load the voice engine. Check your internet connection."); var mobile=/Android|iPhone|iPad|Mobile/i.test(navigator.userAgent),id="onnx-community/Kokoro-82M-v1.0-ONNX"; if(navigator.gpu&&!mobile){try{return await mod.KokoroTTS.from_pretrained(id,{dtype:"fp32",device:"webgpu",progress_callback:prog});}catch(e){}} return await mod.KokoroTTS.from_pretrained(id,{dtype:mobile?"q4":"q8",device:"wasm",progress_callback:prog}); })(); ST.engine.catch(function(){ST.engine=null;}); return ST.engine; } async function genVoice(){ if(ST.ttsBusy||ST.rec)return; stopPlay(); var todo=[],seen={}; ST.scenes.forEach(function(it){var t=narrText(it);if(t&&!seen[t]){seen[t]=1;todo.push(t);}}); if(!todo.length){ttsStatus("Write some script lines first.",0);return;} ST.ttsBusy=true; var g=$("vt-tgen");if(g)g.disabled=true; try{ ttsStatus("Loading voice engine...",3); var last=0,eng=await loadEngine(function(e){ if(e&&e.status==="progress"&&typeof e.progress==="number"){var p=Math.max(last,Math.round(e.progress));last=p;ttsStatus("Downloading voice model (first time only): "+p+"%",3+p*0.4);} }); var voice=val("vt-ttsv","af_heart"),speed=num("vt-ttsp",100)/100; if(!ST.tts)ST.tts={clips:{}}; var i,done=0; for(i=0;i<todo.length;i++){ var key=ttsKey(todo[i]); if(!ST.tts.clips[key]){ ttsStatus("Speaking line "+(i+1)+" of "+todo.length+"...",45+(i/todo.length)*53); var out=await eng.generate(todo[i],{voice:voice,speed:speed}); var data=out.audio,sr=out.sampling_rate||24000; if(!(data instanceof Float32Array))data=Float32Array.from(data); ST.ttsN=(ST.ttsN||0)+1; ST.tts.clips[key]={data:data,sr:sr,dur:data.length/sr,id:"c"+ST.ttsN}; } done++; } ST.ttsBusy=false;ttsStatus("",100); ST.ttsSig="";rebuild();draw(ST.t); status("AI voice ready ("+done+" line"+(done===1?"":"s")+"). Press Play to listen."); var b=$("vt-ttsbar");if(b)b.style.width="0%"; }catch(err){ ST.ttsBusy=false; ttsStatus("Could not generate the voice: "+((err&&err.message)||"unknown error")+" You can still use 'Listen with device voice' to preview, or upload a recorded voice-over.",0); } if(g)g.disabled=false; } function wavBlob(buf){ var d=buf.getChannelData(0),sr=buf.sampleRate,n=d.length,ab=new ArrayBuffer(44+n*2),v=new DataView(ab),i; function w(o,t){for(var k=0;k<t.length;k++)v.setUint8(o+k,t.charCodeAt(k));} w(0,"RIFF");v.setUint32(4,36+n*2,true);w(8,"WAVE");w(12,"fmt ");v.setUint32(16,16,true);v.setUint16(20,1,true);v.setUint16(22,1,true);v.setUint32(24,sr,true);v.setUint32(28,sr*2,true);v.setUint16(32,2,true);v.setUint16(34,16,true);w(36,"data");v.setUint32(40,n*2,true); for(i=0;i<n;i++){var x=Math.max(-1,Math.min(1,d[i]));v.setInt16(44+i*2,x<0?x*32768:x*32767,true);} return new Blob([ab],{type:"audio/wav"}); } function dlVoice(){ if(!ST.tts||!ST.voice){ttsStatus("Generate the AI voice first.",0);return;} var a=document.createElement("a");a.href=URL.createObjectURL(wavBlob(ST.voice));a.download="voice-over.wav";document.body.appendChild(a);a.click(); setTimeout(function(){URL.revokeObjectURL(a.href);a.remove();},1500); } function devPreview(){ if(!window.speechSynthesis||!window.SpeechSynthesisUtterance){ttsStatus("This browser has no built-in voice.",0);return;} if(speechSynthesis.speaking){speechSynthesis.cancel();return;} var any=false; ST.scenes.forEach(function(it){var t=narrText(it);if(!t)return;any=true;var u=new SpeechSynthesisUtterance(t);u.lang="en-US";u.rate=Math.max(0.5,Math.min(1.6,num("vt-ttsp",100)/100));speechSynthesis.speak(u);}); ttsStatus(any?"Playing with your device voice. This is a preview only and cannot be recorded into the video file. Tap again to stop.":"Write some script lines first.",0); } function clrVoice(){ ST.tts=null;ST.ttsSig="";ST.voice=null;stopPlay();rebuild();draw(ST.t);ttsStatus("AI voice removed.",0); } /* ---------------- storage ---------------- */ function saveAll(){ try{ var o={};SAVE.forEach(function(id){var e=$(id);if(e)o[id]=(e.type==="checkbox")?e.checked:e.value;}); localStorage.setItem("vt-settings-v2",JSON.stringify(o)); var sl={};Object.keys(ST.cfg).forEach(function(k){var f=ST.cfg[k];if(f.theme||f.anim||f.sz)sl[k]={theme:f.theme||"",anim:f.anim||"",sz:f.sz||1};}); localStorage.setItem("vt-cfg-v2",JSON.stringify(sl)); }catch(e){} } var HI=/[\u0900-\u097F]/; function loadAll(){ try{ var o=JSON.parse(localStorage.getItem("vt-settings-v2")||"null"); if(o)SAVE.forEach(function(id){var e=$(id);if(e&&o[id]!==undefined){if(typeof o[id]==="string"&&HI.test(o[id]))return;if(e.type==="checkbox")e.checked=o[id];else e.value=o[id];}}); var sl=JSON.parse(localStorage.getItem("vt-cfg-v2")||"null"); if(sl)Object.keys(sl).forEach(function(k){var f=cfg(k);if(sl[k].theme&&THEMES[sl[k].theme])f.theme=sl[k].theme;if(sl[k].anim)f.anim=sl[k].anim;if(sl[k].sz)f.sz=sl[k].sz;}); }catch(e){} } /* ---------------- interface ---------------- */ function selH(id,l,o,d){var h='<label class="vt-f"><span>'+l+'</span><select id="'+id+'">';o.forEach(function(x){h+='<option value="'+x[0]+'"'+(x[0]===d?" selected":"")+">"+x[1]+"</option>";});return h+"</select></label>";} function themeSelH(id,l,d){return'<label class="vt-f"><span>'+l+'</span><select id="'+id+'">'+themeOpts(d,false)+"</select></label>";} function rngH(id,l,a,b,d){return'<label class="vt-f"><span>'+l+'</span><input type="range" id="'+id+'" min="'+a+'" max="'+b+'" value="'+d+'"></label>';} function chkH(id,l,d){return'<label class="vt-f vt-c"><input type="checkbox" id="'+id+'"'+(d?" checked":"")+"><span>"+l+"</span></label>";} function txtH(id,l,ph,full){return'<label class="vt-f'+(full?" vt-full":"")+'"><span>'+l+'</span><input type="text" id="'+id+'" placeholder="'+ph+'"></label>';} function filH(id,l,ac,multi,full){return'<label class="vt-f'+(full?" vt-full":"")+'"><span>'+l+'</span><input type="file" id="'+id+'" accept="'+ac+'"'+(multi?" multiple":"")+"></label>";} function colH(id,l,d){return'<label class="vt-f"><span>'+l+'</span><input type="color" id="'+id+'" value="'+d+'"></label>';} var ICO={ play:'<svg class="vt-fill" viewBox="0 0 24 24"><path d="M7 4.5v15l13-7.5z"/></svg>', pause:'<svg class="vt-fill" viewBox="0 0 24 24"><rect x="6" y="4.5" width="4" height="15" rx="1"/><rect x="14" y="4.5" width="4" height="15" rx="1"/></svg>', rec:'<svg class="vt-fill" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/></svg>', dl:'<svg viewBox="0 0 24 24"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg>', pal:'<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18c1.2 0 2-.8 2-1.8 0-1-.8-1.4-.8-2.4 0-.9.7-1.6 1.6-1.6H17a4 4 0 0 0 4-4C21 6.6 17 3 12 3z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="14.5" cy="7" r="1"/></svg>', shuf:'<svg viewBox="0 0 24 24"><path d="M16 4h4v4M4 20L20 4M20 16v4h-4M4 4l5 5M15 15l5 5"/></svg>', img:'<svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M21 16l-5-5-8 8"/></svg>', x:'<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>', chev:'<svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>', film:'<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16M16 4v16M3 9h5M3 15h5M16 9h5M16 15h5"/></svg>', mic:'<svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>', frame:'<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 15l4-4 5 5 3-3 4 4"/></svg>' }; function ic(n){return'<span class="vt-ic">'+(ICO[n]||"")+"</span>";} function sec(t,o,i){var m=/^(\d+)\.\s*(.*)$/.exec(t),n=m?m[1]:"",tt=m?m[2]:t;return'<details class="vt-sec"'+(o?" open":"")+"><summary>"+(n?'<span class="vt-sn">'+n+"</span>":"")+'<span class="vt-st2">'+tt+"</span>"+'<span class="vt-chev">'+ICO.chev+"</span></summary><div class=\"vt-grid\">"+i+"</div></details>";} function ui(){ var fOpts=Object.keys(FONTS).map(function(k){return[k,FONTS[k].n];}); var h='<div class="vt-h"><div class="vt-logo">'+ICO.film+'</div><div class="vt-ht"><b>Video Studio Pro</b><span>Script in, premium caption video out. Runs fully in your browser.</span></div><div class="vt-tags"><span class="vt-tag">Up to 4K</span><span class="vt-tag">No upload</span><span class="vt-tag">Free</span></div></div>'; h+='<div class="vt-main"><div class="vt-stage"><div class="vt-frame"><canvas id="vt-cv" class="vt-cv"></canvas></div>'; h+='<div class="vt-dock"><div class="vt-trans"><button class="vt-btn vt-pri vt-play" id="vt-play" aria-label="Play">'+ICO.play+'</button><input id="vt-seek" class="vt-seek" type="range" min="0" max="1000" value="0"><span id="vt-time" class="vt-time">0:00 / 0:00</span></div>'; h+='<div id="vt-chips" class="vt-chips"></div>'; h+='<div id="vt-info" class="vt-st"></div>'; h+='<div class="vt-bar vt-ctl"><button class="vt-btn vt-sm" id="vt-scope" title="Choose what the buttons below change">Editing: This scene</button></div>'; h+='<div class="vt-bar vt-ctl"><button class="vt-btn vt-sm" id="vt-fdn" title="Smaller text">A-</button><button class="vt-btn vt-sm" id="vt-fup" title="Bigger text">A+</button><button class="vt-btn vt-sm" id="vt-nth" title="Next theme">'+ICO.pal+'Theme</button><button class="vt-btn vt-sm" id="vt-rth" title="Random theme">'+ICO.shuf+'Random</button></div></div>'; h+='<div class="vt-bar"><button class="vt-btn vt-pri" id="vt-rec">'+ICO.rec+'Record and download</button><button class="vt-btn" id="vt-cancel" style="display:none">Cancel</button><button class="vt-btn" id="vt-png">'+ICO.frame+'PNG frame</button></div>'; h+='<div id="vt-status" class="vt-st"></div><div id="vt-dl"></div></div>'; h+='<div id="vt-panel" class="vt-panel">'; h+=sec("1. Script",true, '<label class="vt-f vt-full"><span>One line = one scene. Put *stars* around a word to highlight it. Optional tags at the start of a line: [zoomIn] [words] [kinetic] [4s]</span><textarea id="vt-script" rows="8"></textarea></label>'+ txtH("vt-title","Intro title (optional)","e.g. The *History* of Paper")+txtH("vt-cta","Outro button text (optional)","e.g. Follow for more")+ '<div class="vt-full vt-bar" style="justify-content:flex-start"><button class="vt-btn" id="vt-s1">Load sample: History</button><button class="vt-btn" id="vt-s2">Load sample: Quotes</button></div>'); h+=sec("2. Scenes: background and theme for each line",true, '<div class="vt-note">Every script line is its own scene. Give each scene a different background (photo or video), theme and animation. Tap a scene row to preview it. The shuffle button picks a random theme.</div>'+ '<div class="vt-full vt-bar" style="justify-content:flex-start"><button class="vt-btn" id="vt-rall">'+ICO.shuf+'Random theme for every scene</button><button class="vt-btn" id="vt-rst">Reset scene themes</button></div>'+ filH("vt-bgmulti","Add many backgrounds at once (assigned to scenes in order)","image/*,video/*",true,true)+ '<div id="vt-scenes" class="vt-rows vt-full"></div>'); h+=sec("3. Look and animation",false, themeSelH("vt-theme","Global theme","mgold")+selH("vt-font","Font style",fOpts,"elegant")+ selH("vt-aspect","Video shape",[["9:16","9:16 Reels / Shorts"],["1:1","1:1 Square"],["4:5","4:5 Portrait post"],["16:9","16:9 YouTube"]],"9:16")+ selH("vt-q","Export quality",[["540","Draft 540p (fast)"],["720","HD 720p"],["1080","Full HD 1080p"],["1440","2K 1440p"],["2160","4K Ultra HD 2160p"]],"1080")+ selH("vt-fps","Frame rate",[["30","30 fps"],["60","60 fps (smoother, heavier)"]],"30")+ selH("vt-anim","Text animation",ANIMS,"auto")+selH("vt-cam","Camera zoom",[["auto","Auto in / out"],["in","Slow zoom in"],["out","Slow zoom out"],["off","Off"]],"auto")+ selH("vt-trans","Scene transition",[["wipe","Colour wipe"],["flash","Flash"],["fade","Fade only"]],"wipe")+selH("vt-pos","Caption position",[["center","Centre"],["low","Lower third"],["top","Upper third"]],"center")+ selH("vt-tstyle","Text effect",[["shadow","Soft shadow"],["plain","Plain"],["outline","Outline"],["glow","Glow"]],"shadow")+selH("vt-hl","Highlight style",[["color","Coloured word"],["box","Coloured box"]],"color")+ rngH("vt-size","Text size (all scenes)",40,180,100)+rngH("vt-speed","Speed (higher = faster scenes)",60,160,100)+ chkH("vt-ultra","Ultra clear (sharpest image, no grain, higher bitrate)",true)+chkH("vt-shine","Metallic shine sweep on text",true)+ chkH("vt-bloom","Soft glow behind text",true)+chkH("vt-bold","Bold text",true)+ chkH("vt-cc","Use my own colours (flat, replaces global metallic)",false)+'<div class="vt-f"></div>'+colH("vt-cac","Accent colour","#e0b04a")+colH("vt-ctx","Text colour","#f6f1e7")); h+=sec("4. Default background and effects",false, filH("vt-gbg","Default background for scenes without their own (photo or video)","image/*,video/*",false,false)+ '<div class="vt-f"><span>Remove default background</span><button class="vt-btn" id="vt-gclr">Clear</button></div>'+ rngH("vt-ov","Darken backgrounds",0,90,50)+'<div class="vt-f"></div>'+ chkH("vt-orbs","Soft light orbs",true)+chkH("vt-part","Floating particles",true)+chkH("vt-grain","Film grain (off in Ultra clear)",true)+chkH("vt-vig","Vignette",true)+ chkH("vt-orn","Accent line above text",true)+chkH("vt-border","Thin frame",true)+chkH("vt-prog","Story progress bar",true)+chkH("vt-count","Scene counter",false)+ txtH("vt-wm","Watermark / channel name","e.g. @yourchannel",true)+chkH("vt-guides","Show phone safe-zone guide (preview only)",false)); h+=sec("5. AI voice from text",false, selH("vt-ttsv","Voice",TTS_VOICES,"af_heart")+rngH("vt-ttsp","Speaking speed",80,130,100)+ chkH("vt-ttsfit","Fit scene timing to the narration",true)+chkH("vt-ttstitle","Also read the intro title aloud",true)+ '<div class="vt-full vt-bar" style="justify-content:flex-start"><button class="vt-btn vt-pri" id="vt-tgen">'+ICO.mic+'Generate voice</button><button class="vt-btn" id="vt-tdl">'+ICO.dl+'Download voice (WAV)</button><button class="vt-btn" id="vt-tprev">Listen with device voice</button><button class="vt-btn" id="vt-tclr">Remove AI voice</button></div>'+ '<div class="vt-full"><div class="vt-pbar"><span id="vt-ttsbar"></span></div></div>'+ '<div class="vt-note" id="vt-ttsn">'+TTS_HINT+'</div>'); h+=sec("6. Music and voice-over",false, filH("vt-mus","Background music (MP3 / WAV)","audio/*")+rngH("vt-mvol","Music volume",0,100,60)+ filH("vt-voc","Voice-over (MP3 / WAV)","audio/*")+rngH("vt-vvol","Voice volume",0,100,100)+ chkH("vt-fade","Fade music out at the end",true)+chkH("vt-sync","Match scene timing to voice-over length",false)+ '<div class="vt-f"><span>Remove audio</span><button class="vt-btn" id="vt-clraud">Clear</button></div>'); h+=sec("7. Export and tips",false, selH("vt-fmt","File format",[["mp4","MP4 (H.264)"],["webm","WebM"]],"mp4")+'<div class="vt-f"></div>'+ '<div class="vt-note"><b>How export works:</b> the tool plays the video once in real time and records it, so a 30 s video takes 30 s. Keep this tab open and visible while recording.<br><b>4K:</b> needs a fast computer with Chrome or Edge. If the video stutters, record at 1080p or 1440p. MP4 needs Chrome 126+ or Edge; otherwise you get WebM.<br>Your settings are saved in this browser automatically. Backgrounds are not saved, so add them again after reopening.</div>'); h+="</div></div>"; return h; } function onChange(e){ var id=e.target&&e.target.id; if(!id||id==="vt-seek"||e.target.type==="file"||ST.rec)return; if(id==="vt-aspect"||id==="vt-q")setSize(false); if(ST.playing)stopPlay(); saveAll(); if(id==="vt-font"){ensureFonts().then(function(){rebuild();draw(ST.t);});} rebuild();draw(ST.t); } function fillSample(k){ var s=SAMPLES[k]; $("vt-script").value=s.sc;$("vt-title").value=s.ti;$("vt-cta").value=s.cta; stopPlay();setT(0);saveAll();rebuild();draw(0); } function wire(){ var root=$("vt-app"),sc=$("vt-scenes"); root.addEventListener("input",onChange); root.addEventListener("change",onChange); sc.addEventListener("change",sceneEv); sc.addEventListener("click",sceneEv); $("vt-seek").addEventListener("input",function(){if(ST.rec)return;stopPlay();var t=this.value/1000*ST.total;setT(t,true);seekVid(t);draw(t);}); $("vt-play").onclick=function(){if(ST.rec)return;if(ST.playing){stopPlay();return;}startPlay(ST.t>=ST.total-0.05?0:ST.t);}; $("vt-rec").onclick=startRecord; $("vt-cancel").onclick=cancelRecord; $("vt-png").onclick=savePng; $("vt-s1").onclick=function(){fillSample("history");}; $("vt-s2").onclick=function(){fillSample("quotes");}; $("vt-scope").onclick=function(){ST.scope=ST.scope==="all"?"this":"all";this.textContent="Editing: "+(ST.scope==="all"?"All scenes":"This scene");}; $("vt-fdn").onclick=function(){resizeText(-1);}; $("vt-fup").onclick=function(){resizeText(1);}; $("vt-nth").onclick=nextTheme; $("vt-rth").onclick=randomTheme; $("vt-rall").onclick=function(){if(ST.rec)return;randomAll();afterCfg();}; $("vt-rst").onclick=function(){if(ST.rec)return;ST.scenes.forEach(function(s){delete cfg(s.key).theme;});afterCfg();}; $("vt-chips").onclick=function(e){var b=e.target;if(b&&b.getAttribute&&b.getAttribute("data-i")!==null)jumpTo(b.getAttribute("data-i"));}; $("vt-bgmulti").onchange=function(){ var files=Array.prototype.slice.call(this.files||[]),left=files.length,ok=0; if(!left||ST.rec)return; files.forEach(function(file,i){ var s=ST.scenes[i]; if(!s){left--;return;} loadMedia(file,function(m){ if(m){cfg(s.key).m=m;ok++;} left--; if(left<=0){afterCfg();status("Added "+ok+" background"+(ok===1?"":"s")+" to scenes in order.");} }); }); }; $("vt-gbg").onchange=function(){var f=this.files[0];if(!f)return;loadMedia(f,function(m){if(!m){alert("Could not open this file.");return;}ST.gm=m;draw(ST.t);});}; $("vt-gclr").onclick=function(){ST.gm=null;draw(ST.t);}; $("vt-mus").onchange=function(){var f=this.files[0];if(!f)return;loadAudio(f,function(b){ST.music=b;status("Music loaded ("+Math.round(b.duration)+" s)");});}; $("vt-voc").onchange=function(){var f=this.files[0];if(!f)return;loadAudio(f,function(b){ST.tts=null;ST.ttsSig="";ST.voice=b;rebuild();draw(ST.t);status("Voice-over loaded ("+Math.round(b.duration)+" s). Tick 'Match scene timing' to sync.");});}; $("vt-tgen").onclick=genVoice;$("vt-tdl").onclick=dlVoice;$("vt-tprev").onclick=devPreview;$("vt-tclr").onclick=clrVoice; $("vt-clraud").onclick=function(){ST.music=null;ST.voice=null;ST.tts=null;ST.ttsSig="";rebuild();draw(ST.t);status("Audio removed.");}; } function mkParts(){ var sd=12345,i; function rnd(){sd=(sd*1664525+1013904223)%4294967296;return sd/4294967296;} ST.parts=[]; for(i=0;i<70;i++)ST.parts.push({x:rnd(),y:rnd(),v:0.5+rnd(),ph:rnd()*6.28,r:1+rnd()*3}); } function mkGrain(){ try{ var g=document.createElement("canvas");g.width=160;g.height=160; var x=g.getContext("2d"),d=x.createImageData(160,160),i,v; for(i=0;i<d.data.length;i+=4){v=Math.random()*255;d.data[i]=v;d.data[i+1]=v;d.data[i+2]=v;d.data[i+3]=255;} x.putImageData(d,0,0);ST.grain=ST.c.createPattern(g,"repeat"); }catch(e){} } function init(){ var root=$("vt-app"); if(!root)return; try{ fontLink=new Promise(function(res){var l=document.createElement("link");l.rel="stylesheet";l.href=GF;l.onload=res;l.onerror=res;document.head.appendChild(l);}); }catch(e){fontLink=Promise.resolve();} root.innerHTML=ui(); ST.cv=$("vt-cv");ST.c=ST.cv.getContext("2d"); $("vt-script").value=SAMPLES.history.sc;$("vt-title").value=SAMPLES.history.ti;$("vt-cta").value=SAMPLES.history.cta; loadAll();["vt-script","vt-title","vt-cta","vt-wm"].forEach(function(id){var e=$(id);if(e)e.addEventListener("input",function(){if(HI.test(e.value)){var a=e.selectionStart,n=e.value.length;e.value=e.value.replace(/[\u0900-\u097F]/g,"");var d=n-e.value.length;try{e.setSelectionRange(Math.max(0,a-d),Math.max(0,a-d));}catch(x){}}});});mkParts();mkGrain();setSize(false);wire();rebuild();draw(0);setPlayLabel(); ensureFonts().then(function(){rebuild();draw(ST.t);}); } if(window.__VT_TEST){window.__VT_TEST.api={ST:ST,draw:draw,rebuild:rebuild,setSize:setSize,init:init,startPlay:startPlay,stopPlay:stopPlay,ANIMS:ANIMS,THEMES:THEMES,FONTS:FONTS,cfg:cfg};} if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",init);}else{init();} })();

TopicsTools

CAPTION VIDEO CREATOR

Watch next

Post a Comment

New videos and free tools on our YouTube channel