Future Tool Matrix Template
ViralThreadAI
The ultimate utility tool for X creators. No monthly subscriptions. Just use your own API key and generate unlimited threads forever.
Live Full Page PreviewSource Code
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ViralThread AI | Lifetime Access Twitter Thread Generator</title>
<meta name="description" content="Pay once, use forever. Transform YouTube transcripts into viral Twitter threads using your own AI keys. The ultimate tool for content repurposing.">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #f8fafc; }
.glow { box-shadow: 0 0 20px rgba(37, 99, 235, 0.2); }
.gradient-text { background: linear-gradient(to right, #60a5fa, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tweet-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
</style>
</head>
<body class="selection:bg-blue-500/30">
<!-- Navigation -->
<nav class="fixed w-full z-50 border-b border-white/5 bg-slate-950/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="bg-blue-600 p-1.5 rounded-lg"><i class="fa-brands fa-x-twitter text-white"></i></div>
<span class="text-xl font-extrabold tracking-tight">ViralThread<span class="text-blue-500">AI</span></span>
</div>
<div class="hidden md:flex gap-8 text-sm font-semibold text-slate-400">
<a href="#features" class="hover:text-white transition">Features</a>
<a href="#tool" class="hover:text-white transition">Try Tool</a>
<a href="#pricing" class="hover:text-white transition">Pricing</a>
</div>
<button id="configBtn" class="bg-slate-800 hover:bg-slate-700 px-5 py-2 rounded-full text-sm font-bold transition flex items-center gap-2">
<i class="fa-solid fa-key"></i> API Config
</button>
</div>
</nav>
<!-- Hero Section -->
<header class="pt-32 pb-20 px-6">
<div class="max-w-4xl mx-auto text-center">
<div class="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-full mb-8">
<span class="text-blue-400 text-xs font-bold uppercase tracking-widest">Pay Once • Use Forever • BYOK Model</span>
</div>
<h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">Turn YouTube Videos into <span class="gradient-text">Viral Twitter Threads</span></h1>
<p class="text-xl text-slate-400 mb-10 leading-relaxed max-w-2xl mx-auto">The ultimate utility tool for X creators. No monthly subscriptions. Just use your own API key and generate unlimited threads forever.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#tool" class="bg-blue-600 hover:bg-blue-500 px-8 py-4 rounded-2xl font-bold text-lg shadow-lg shadow-blue-500/20 transition-all hover:scale-105 flex items-center justify-center gap-2">
<i class="fa-solid fa-bolt"></i> Start Generating
</a>
<a href="#pricing" class="bg-slate-800 hover:bg-slate-700 px-8 py-4 rounded-2xl font-bold text-lg transition flex items-center justify-center gap-2">
Lifetime Pricing
</a>
</div>
</div>
</header>
<!-- THE TOOL -->
<section id="tool" class="py-24 px-6 bg-blue-600/5">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl font-black mb-4">The Generator</h2>
<p class="text-slate-400">Ensure your API Key is configured in the settings above.</p>
</div>
<div class="bg-slate-900 border border-slate-800 p-8 rounded-[2.5rem] shadow-2xl">
<div class="mb-6">
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">1. YouTube Transcript</label>
<textarea id="transcript" rows="6" class="w-full bg-slate-950 border border-slate-800 rounded-2xl p-5 text-slate-300 focus:border-blue-500 outline-none transition" placeholder="Paste transcript here..."></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">2. Writing Style</label>
<select id="tone" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 outline-none focus:border-blue-500 text-sm">
<option value="Hormozi style: High energy, negative constraints, short sentences">Hormozi (Direct)</option>
<option value="Naval style: Philosophical, deep wisdom, minimalist">Naval (Deep)</option>
<option value="Scientific, actionable, professional">Huberman (Detailed)</option>
</select>
</div>
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3">3. Thread Length</label>
<div class="flex items-center gap-4 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5">
<input type="range" id="length" min="3" max="15" value="8" class="flex-1 accent-blue-500">
<span id="lenDisplay" class="font-bold text-blue-400 text-xs w-12">8 Posts</span>
</div>
</div>
</div>
<button id="runBtn" class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-lg shadow-xl flex items-center justify-center gap-3 transition">
<i class="fa-solid fa-sparkles"></i> GENERATE THREAD
</button>
</div>
<div id="output" class="hidden mt-12 space-y-6">
<div id="results" class="space-y-4"></div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-24 px-6 max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-black mb-4">One-Time Payment. Lifetime Access.</h2>
<p class="text-slate-400">No monthly bills. Secure lifetime access through Stripe.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Tier 1 -->
<div class="bg-slate-900/50 border border-slate-800 p-10 rounded-[2.5rem] flex flex-col">
<div class="mb-8">
<h4 class="font-bold text-slate-400 uppercase tracking-widest text-xs mb-2">Starter</h4>
<div class="text-4xl font-black">$9<span class="text-sm text-slate-500 font-normal ml-2">Lifetime</span></div>
<p class="text-xs text-slate-500 mt-2 italic">Best for solo creators</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> 1 User License</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Unlimited Threads (BYOK)</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Local Browser Data Storage</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> All Standard AI Tones</li>
</ul>
<a href="https://buy.stripe.com/fZuaEY4HUdje1Ed3tOfbq06" target="_blank" class="w-full py-4 text-center rounded-2xl border border-slate-700 font-bold hover:bg-slate-800 transition">Get Starter</a>
</div>
<!-- Tier 2 -->
<div class="bg-slate-900 border-2 border-blue-600 p-10 rounded-[2.5rem] flex flex-col relative glow">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-600 px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-tighter">Recommended</div>
<div class="mb-8">
<h4 class="font-bold text-blue-400 uppercase tracking-widest text-xs mb-2">Pro Team</h4>
<div class="text-4xl font-black">$19<span class="text-sm text-slate-500 font-normal ml-2">Lifetime</span></div>
<p class="text-xs text-slate-500 mt-2 italic">Best for small teams</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Up to 5 User Licenses</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Unlimited Threads (BYOK)</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Lifetime Tool Access</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> All Standard AI Tones</li>
</ul>
<a href="https://buy.stripe.com/8x25kE1vIeni6Yxfcwfbq07" target="_blank" class="w-full py-4 text-center bg-blue-600 hover:bg-blue-500 rounded-2xl font-bold shadow-lg shadow-blue-500/20 transition">Get Pro Team</a>
</div>
<!-- Tier 3 -->
<div class="bg-slate-900/50 border border-slate-800 p-10 rounded-[2.5rem] flex flex-col">
<div class="mb-8">
<h4 class="font-bold text-slate-400 uppercase tracking-widest text-xs mb-2">Agency</h4>
<div class="text-4xl font-black">$49<span class="text-sm text-slate-500 font-normal ml-2">Lifetime</span></div>
<p class="text-xs text-slate-500 mt-2 italic">Best for large agencies</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> 20 User Licenses</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Unlimited Threads (BYOK)</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> Agency-wide License</li>
<li class="flex items-center gap-3 text-sm text-slate-300"><i class="fa-solid fa-check text-blue-500"></i> All Standard AI Tones</li>
</ul>
<a href="https://buy.stripe.com/4gMdRaa2egvqciRd4ofbq08" target="_blank" class="w-full py-4 text-center rounded-2xl border border-slate-700 font-bold hover:bg-slate-800 transition">Get Agency</a>
</div>
</div>
</section>
<!-- Settings Modal -->
<div id="apiModal" class="hidden fixed inset-0 z-[60] flex items-center justify-center bg-black/95 backdrop-blur-sm p-4">
<div class="bg-slate-900 border border-slate-700 p-8 rounded-[2rem] w-full max-w-md shadow-2xl">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">API Configuration</h3>
<button id="closeModal" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="space-y-5">
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase mb-1">Provider</label>
<select id="providerSelect" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 outline-none focus:border-blue-500 text-sm">
<option value="openrouter">OpenRouter (Recommended)</option>
<option value="gemini">Google Gemini</option>
</select>
</div>
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase mb-1">Your API Key</label>
<input type="password" id="apiKeyInput" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 outline-none focus:border-blue-500 text-sm" placeholder="sk-...">
<p class="text-[9px] text-slate-500 mt-2 italic">Stored locally in your browser only.</p>
</div>
<div>
<label class="block text-[10px] font-black text-slate-500 uppercase mb-1">Model ID</label>
<input type="text" id="modelIdInput" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 outline-none focus:border-blue-500 text-xs text-blue-400 font-mono">
</div>
<button id="saveConfig" class="w-full bg-blue-600 hover:bg-blue-500 py-4 rounded-xl font-bold transition">Save Locally</button>
</div>
</div>
</div>
<script>
// Modal Logic
const modal = document.getElementById('apiModal');
document.getElementById('configBtn').onclick = () => modal.classList.remove('hidden');
document.getElementById('closeModal').onclick = () => modal.classList.add('hidden');
const saveBtn = document.getElementById('saveConfig');
saveBtn.onclick = () => {
const p = document.getElementById('providerSelect').value;
localStorage.setItem(`vt_key_${p}`, document.getElementById('apiKeyInput').value);
localStorage.setItem(`vt_model_${p}`, document.getElementById('modelIdInput').value);
localStorage.setItem('vt_active_provider', p);
modal.classList.add('hidden');
};
// Provider Switching
document.getElementById('providerSelect').onchange = (e) => {
const p = e.target.value;
document.getElementById('apiKeyInput').value = localStorage.getItem(`vt_key_${p}`) || '';
document.getElementById('modelIdInput').value = localStorage.getItem(`vt_model_${p}`) || (p === 'openrouter' ? 'deepseek/deepseek-v3' : 'gemini-1.5-flash');
};
// Load Defaults
const activeP = localStorage.getItem('vt_active_provider') || 'openrouter';
document.getElementById('providerSelect').value = activeP;
document.getElementById('apiKeyInput').value = localStorage.getItem(`vt_key_${activeP}`) || '';
document.getElementById('modelIdInput').value = localStorage.getItem(`vt_model_${activeP}`) || (activeP === 'openrouter' ? 'deepseek/deepseek-v3' : 'gemini-1.5-flash');
document.getElementById('length').oninput = (e) => {
document.getElementById('lenDisplay').innerText = `${e.target.value} Posts`;
};
// Generation Logic
document.getElementById('runBtn').onclick = async () => {
const transcript = document.getElementById('transcript').value;
const p = localStorage.getItem('vt_active_provider') || 'openrouter';
const key = localStorage.getItem(`vt_key_${p}`);
const model = localStorage.getItem(`vt_model_${p}`);
if (!transcript || !key) return alert("Configure your API Key first!");
const btn = document.getElementById('runBtn');
btn.innerHTML = `<i class="fa-solid fa-spinner animate-spin"></i> GENERATING...`;
btn.disabled = true;
const prompt = `Write a viral Twitter thread of exactly ${document.getElementById('length').value} posts. Style: ${document.getElementById('tone').value}. Separate posts with "---". Transcript: ${transcript.substring(0, 8000)}`;
try {
let r;
if (p === 'openrouter') {
r = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${key}` },
body: JSON.stringify({ model: model, messages: [{ role: 'user', content: prompt }] })
});
} else {
r = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${key}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
});
}
const d = await r.json();
if (!r.ok) throw new Error(d.error?.message || "Check API Key");
const text = p === 'openrouter' ? d.choices[0].message.content : d.candidates[0].content.parts[0].text;
render(text);
} catch (err) {
alert(err.message);
} finally {
btn.innerHTML = `<i class="fa-solid fa-sparkles"></i> GENERATE THREAD`;
btn.disabled = false;
}
};
function render(raw) {
const container = document.getElementById('results');
container.innerHTML = '';
document.getElementById('output').classList.remove('hidden');
raw.split('---').filter(p => p.trim().length > 5).forEach((p, i) => {
const card = document.createElement('div');
card.className = "tweet-card p-6 rounded-2xl";
card.innerHTML = `<div class="text-[10px] text-blue-500 font-black mb-2 uppercase">Post ${i+1}</div><p class="text-slate-200">${p.trim()}</p>`;
container.appendChild(card);
});
window.scrollTo({ top: document.getElementById('output').offsetTop - 100, behavior: 'smooth' });
}
</script>
</body>
</html>