| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="description" |
| content="AI SquadX VIP – Generate viral YouTube Shorts from any long-form video in seconds using AI-powered clipping." /> |
| <title>AI SquadX VIP – Generate Viral Shorts</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" |
| rel="stylesheet" /> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
|
|
| <body> |
|
|
| |
| <div class="bg-orb orb-1"></div> |
| <div class="bg-orb orb-2"></div> |
| <div class="bg-orb orb-3"></div> |
|
|
| |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
| <div class="particle"></div> |
|
|
| |
| <header class="site-header"> |
| <div class="header-inner"> |
| <div class="logo"> |
| <div class="logo-icon" aria-hidden="true"> |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <rect width="28" height="28" rx="8" fill="url(#logoGrad)" /> |
| <path d="M10 9L19 14L10 19V9Z" fill="white" /> |
| <defs> |
| <linearGradient id="logoGrad" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse"> |
| <stop stop-color="#7C3AED" /> |
| <stop offset="1" stop-color="#EC4899" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| <span class="logo-text">AI SquadX <span class="logo-vip">VIP</span></span> |
| </div> |
| <div class="header-badge"> |
| <span class="badge-dot"></span> |
| <span>Clipper Engine v2</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main> |
|
|
| |
| <section id="screen-input" class="screen active"> |
| <div class="hero-content"> |
| <div class="hero-badge"> |
| <svg width="14" height="14" viewBox="0 0 14 14" fill="none"> |
| <path |
| d="M7 1L8.854 4.764L13 5.382L10 8.304L10.708 12.5L7 10.528L3.292 12.5L4 8.304L1 5.382L5.146 4.764L7 1Z" |
| fill="#FBBF24" /> |
| </svg> |
| AI-Powered Viral Clip Generator |
| </div> |
|
|
| <h1 class="hero-title"> |
| Turn Any YouTube Video<br /> |
| Into <span class="gradient-text">Viral Shorts</span> |
| </h1> |
|
|
| <p class="hero-subtitle"> |
| Paste a YouTube URL and let our AI analyze, clip, and format the most viral-worthy moments — automatically. |
| </p> |
|
|
| |
| <div class="input-card"> |
| <div class="input-wrapper"> |
| <div class="input-icon" aria-hidden="true"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <path |
| d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 00-1.95 1.96A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.54C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.96A29 29 0 0023 12a29 29 0 00-.46-5.58z" /> |
| <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="currentColor" stroke="none" /> |
| </svg> |
| </div> |
| <input id="youtube-url-input" type="url" placeholder="Paste YouTube URL here..." autocomplete="off" |
| spellcheck="false" /> |
| </div> |
|
|
| |
| <div class="options-row"> |
|
|
| |
| <div class="mode-toggle" role="group" aria-label="Crop mode"> |
| <input type="radio" name="crop-mode" id="mode-fill" value="fill" checked /> |
| <label for="mode-fill" class="mode-btn"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="3" y="3" width="18" height="18" rx="2" /> |
| <path d="M3 9h18M3 15h18" /> |
| </svg> |
| Fill |
| <span class="mode-hint">Crop</span> |
| </label> |
| <input type="radio" name="crop-mode" id="mode-pad" value="pad" /> |
| <label for="mode-pad" class="mode-btn"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="6" y="6" width="12" height="12" rx="1" /> |
| <rect x="2" y="2" width="20" height="20" rx="2" /> |
| </svg> |
| Pad |
| <span class="mode-hint">Bars</span> |
| </label> |
| </div> |
|
|
| |
| <div class="clip-count-control" aria-label="Clip count"> |
| <span class="clip-count-label">Clips</span> |
| <div class="clip-stepper"> |
| <button class="stepper-btn" id="clips-dec" aria-label="Fewer clips">−</button> |
| <span id="clips-display" class="clips-default">Default</span> |
| <button class="stepper-btn" id="clips-inc" aria-label="More clips">+</button> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div class="advanced-options"> |
| <div class="option-header"> |
| <span class="option-title">Advanced Magic</span> |
| <div class="badge-new">NEW</div> |
| </div> |
|
|
| <div class="advanced-grid"> |
| |
| <div class="toggle-control captions-block" style="grid-column: span 2;"> |
| <div class="captions-row"> |
| <label class="switch"> |
| <input type="checkbox" id="captions-toggle"> |
| <span class="slider round"></span> |
| </label> |
| <div class="toggle-label-group"> |
| <span class="toggle-label">AI Auto-Captions</span> |
| <span class="toggle-hint">Smart subtitles</span> |
| </div> |
| </div> |
| |
| <div id="caption-style-wrapper" class="caption-style-wrapper" style="display:none;"> |
| <select id="caption-style-select"> |
| <option value="mrbeast">🔥 MrBeast — Bold White + Black Outline</option> |
| <option value="podcast">🎙️ Podcast — Clean Dark Pill Box</option> |
| <option value="neon">⚡ Neon — Cyan Glow</option> |
| <option value="horror">🩸 Horror — Blood Red Shadow</option> |
| <option value="minimal">✨ Minimal — Sleek & Clean</option> |
| </select> |
| </div> |
| </div> |
|
|
| |
| <div class="toggle-control"> |
| <label class="switch"> |
| <input type="checkbox" id="reframe-toggle"> |
| <span class="slider round"></span> |
| </label> |
| <div class="toggle-label-group"> |
| <span class="toggle-label">Smart Reframe</span> |
| <span class="toggle-hint">Face tracking AI</span> |
| </div> |
| </div> |
|
|
| |
| <div class="toggle-control"> |
| <label class="switch"> |
| <input type="checkbox" id="progress-bar-toggle"> |
| <span class="slider round"></span> |
| </label> |
| <div class="toggle-label-group"> |
| <span class="toggle-label">Progress Bar</span> |
| <span class="toggle-hint">Viral visual cue</span> |
| </div> |
| </div> |
|
|
| |
| <div class="vibe-control"> |
| <select id="vibe-select"> |
| <option value="none">No Background Music</option> |
| <option value="energy">Vibe: Energy ⚡</option> |
| <option value="chill">Vibe: Chill 🌊</option> |
| <option value="lofi">Vibe: Lo-Fi ☕</option> |
| <option value="cinematic">Vibe: Cinematic 🎬</option> |
| </select> |
| </div> |
|
|
| |
| <div class="text-inputs" style="grid-column: span 2;"> |
| <div class="input-field"> |
| <input type="text" id="headline-input" placeholder="Top Headline (e.g. Wait for it...)" |
| maxlength="40"> |
| <span class="char-counter"><span class="char-count">0</span>/40</span> |
| </div> |
| <div class="input-field"> |
| <input type="text" id="cta-input" placeholder="Bottom CTA (e.g. Subscribe!)" maxlength="40"> |
| <span class="char-counter"><span class="char-count">0</span>/40</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="retention-section" id="retention-section"> |
| <button class="retention-header" id="retention-toggle-btn" aria-expanded="false" |
| aria-controls="retention-body"> |
| <span class="retention-title"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" |
| stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| <circle cx="12" cy="12" r="10" /> |
| <polyline points="12 6 12 12 16 14" /> |
| </svg> |
| 🧠 Retention Psychology |
| </span> |
| <span class="retention-badge">NEW</span> |
| <svg class="retention-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" |
| stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" |
| aria-hidden="true"> |
| <polyline points="6 9 12 15 18 9" /> |
| </svg> |
| </button> |
|
|
| <div class="retention-body" id="retention-body"> |
| |
| <div class="toggle-control rp-control rp-select-control"> |
| <label class="rp-select-label" for="duration-range-select">Clip Duration</label> |
| <div class="rp-select-wrapper"> |
| <select id="duration-range-select" class="rp-native-select"> |
| <option value="auto">Auto — Best viral hook (Shorts)</option> |
| <option value="15-30">15 – 30 seconds — High impact</option> |
| <option value="30-60">30 – 60 seconds — Storytelling</option> |
| <option value="60-90">60 – 90 seconds — Deep insight</option> |
| </select> |
| <svg class="select-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> |
| </div> |
| <span class="toggle-hint" style="margin-top:0.25rem;">Segments are expanded to meet chosen length</span> |
| </div> |
|
|
| |
| <div class="toggle-control rp-control"> |
| <label class="switch"> |
| <input type="checkbox" id="retention-mode-toggle"> |
| <span class="slider round"></span> |
| </label> |
| <div class="toggle-label-group"> |
| <span class="toggle-label">Retention Mode</span> |
| <span class="toggle-hint">Clips enforced to 20–59 s optimal window</span> |
| </div> |
| </div> |
|
|
| |
| <div class="toggle-control rp-control rp-select-control"> |
| <label class="rp-select-label" for="color-mode-select">Color Psychology</label> |
| <select id="color-mode-select" class="rp-native-select"> |
| <option value="off">Off — No color grading</option> |
| <option value="boost">⚡ Boost — +40% saturation</option> |
| <option value="yellow">🔆 Yellow — Warm viral push</option> |
| <option value="red">🔴 Red — Red-dominant drama</option> |
| </select> |
| <span class="toggle-hint" style="margin-top:0.25rem;">Colour psychology preset applied to clip</span> |
| </div> |
|
|
| |
| <div class="toggle-control rp-control"> |
| <label class="switch"> |
| <input type="checkbox" id="safe-zone-toggle"> |
| <span class="slider round"></span> |
| </label> |
| <div class="toggle-label-group"> |
| <span class="toggle-label">Safe-Zone Crop</span> |
| <span class="toggle-hint">Centre 12.5% focus — eye in the middle</span> |
| </div> |
| </div> |
|
|
| |
| <div class="toggle-control rp-control" style="display:block;"> |
| <label class="rp-select-label" for="watermark-input">Watermark Text</label> |
| <input type="text" id="watermark-input" class="rp-text-input" placeholder="e.g. @YourHandle" |
| maxlength="30"> |
| <span class="toggle-hint" style="margin-top:0.25rem;">Embeds semi-transparent text in the bottom-right |
| corner</span> |
| </div> |
| </div> |
| </div> |
|
|
| <button id="generate-btn" class="btn-generate" aria-label="Generate Viral Shorts"> |
| <span class="btn-text"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /> |
| </svg> |
| Generate Viral Shorts |
| </span> |
| <span class="btn-shimmer"></span> |
| </button> |
| </div> |
|
|
| |
| <div class="stats-row"> |
| <div class="stat-item"> |
| <span class="stat-number">10x</span> |
| <span class="stat-label">Faster than manual editing</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-number">9:16</span> |
| <span class="stat-label">Vertical-first format</span> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <span class="stat-number">AI</span> |
| <span class="stat-label">Hook detection</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="screen-loading" class="screen"> |
| <div class="loading-content"> |
| |
| <div class="spinner-ring" aria-hidden="true"> |
| <div class="ring-outer"></div> |
| <div class="ring-inner"></div> |
| <div class="ring-icon"> |
| <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /> |
| </svg> |
| </div> |
| </div> |
|
|
| <h2 class="loading-title">Processing Your Video</h2> |
| <p id="loading-message" class="loading-message">Connecting to AI engine...</p> |
|
|
| |
| <div class="progress-track"> |
| <div id="progress-bar" class="progress-fill"></div> |
| </div> |
|
|
| |
| <div class="step-list" role="list"> |
| <div class="step-item" id="step-1" role="listitem"> |
| <div class="step-icon"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| <path d="M9 12l2 2 4-4" /> |
| </svg> |
| </div> |
| <span>Fetching video metadata</span> |
| </div> |
| <div class="step-item" id="step-2" role="listitem"> |
| <div class="step-icon"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| <path d="M9 12l2 2 4-4" /> |
| </svg> |
| </div> |
| <span>Analyzing viral hooks</span> |
| </div> |
| <div class="step-item" id="step-3" role="listitem"> |
| <div class="step-icon"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| <path d="M9 12l2 2 4-4" /> |
| </svg> |
| </div> |
| <span>Clipping & formatting</span> |
| </div> |
| <div class="step-item" id="step-4" role="listitem"> |
| <div class="step-icon"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> |
| <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| <path d="M9 12l2 2 4-4" /> |
| </svg> |
| </div> |
| <span>Rendering shorts</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="screen-results" class="screen"> |
| <div class="results-header"> |
| <div class="results-title-group"> |
| <h2 class="results-title">Your Viral Shorts Are Ready</h2> |
| <p class="results-subtitle"><span id="results-count" aria-label="Number of clips generated">0</span> clips generated from your video</p> |
| <div id="results-loading-badge" class="results-loading-badge" style="display:none;"> |
| <div class="badge-mini-spinner"></div> |
| <span>Generating more clips…</span> |
| </div> |
| </div> |
| <button id="new-video-btn" class="btn-ghost"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <polyline points="1 4 1 10 7 10" /> |
| <path d="M3.51 15a9 9 0 102.13-9.36L1 10" /> |
| </svg> |
| New Video |
| </button> |
| </div> |
|
|
| <div id="results-gallery" class="results-gallery" role="list"> |
| |
| </div> |
| </section> |
|
|
| |
| <section id="screen-error" class="screen"> |
| <div class="error-content"> |
| <div class="error-icon" aria-hidden="true"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="12" cy="12" r="10" /> |
| <line x1="12" y1="8" x2="12" y2="12" /> |
| <line x1="12" y1="16" x2="12.01" y2="16" /> |
| </svg> |
| </div> |
| <h2 class="error-title">Something Went Wrong</h2> |
| <p id="error-message" class="error-message">Unable to process your video. Please try again.</p> |
| <button id="retry-btn" class="btn-generate" style="margin-top:2rem;"> |
| <span class="btn-text">Try Again</span> |
| <span class="btn-shimmer"></span> |
| </button> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| |
| <footer class="site-footer"> |
| <p>© 2026 AI SquadX VIP · Powered by Advanced AI Clipping Engine</p> |
| </footer> |
|
|
| <script src="app.js"></script> |
| </body> |
|
|
| </html> |
