Claude Embed Test Page

https://claude.site/public/artifacts/ad46e6bb-9fc4-4b03-b545-220c28ddf6b7/embed

import React, { useState } from ‘react’; import { Sparkles, Video, TrendingUp, Zap, Copy, Download, RefreshCw, CheckCircle } from ‘lucide-react’; const ViralReelGenerator = () => { const [inputText, setInputText] = useState(”); const [niche, setNiche] = useState(”); const [goal, setGoal] = useState(‘follows’); const [loading, setLoading] = useState(false); const [scriptOutput, setScriptOutput] = useState(null); const [copied, setCopied] = useState(false); const niches = [ ‘Business’, ‘Finance’, ‘Leadership’, ‘Fitness’, ‘Running’, ‘Nutrition’, ‘Skincare’, ‘Dog Training’, ‘Travel’, ‘Beauty’, ‘Comedy’, ‘Education’, ‘Relationships’, ‘Tech’, ‘Fashion’, ‘Food’, ‘Productivity’, ‘Mental Health’, ‘Parenting’, ‘Real Estate’, ‘Marketing’ ]; const goals = [ { value: ‘follows’, label: ‘📈 Gain Followers’ }, { value: ‘leads’, label: ‘🎯 Generate Leads’ }, { value: ‘engagement’, label: ‘💬 Boost Engagement’ }, { value: ‘sales’, label: ‘💰 Drive Sales’ } ]; const generateScript = async () => { if (!inputText.trim()) { alert(‘Please enter your content idea!’); return; } setLoading(true); // Simulate script generation with realistic timing setTimeout(() => { const selectedNiche = niche || ‘General’; // Analyze input to extract key themes (in production, this would use Claude API) const inputLower = inputText.toLowerCase(); // Determine hook style based on content let hookVerbal = “Stop scrolling! This changed everything for me…”; let hookText = “YOU NEED TO SEE THIS 👀”; if (inputLower.includes(‘mistake’) || inputLower.includes(‘wrong’)) { hookVerbal = “Everyone’s doing this wrong… and it’s costing them everything.”; hookText = “STOP DOING THIS ❌”; } else if (inputLower.includes(‘secret’) || inputLower.includes(‘nobody tells’)) { hookVerbal = “Nobody talks about this… but it’s the real game-changer.”; hookText = “THE SECRET NOBODY TELLS YOU 🤫”; } else if (inputLower.includes(‘ai’) || inputLower.includes(‘technology’)) { hookVerbal = “Everyone’s rushing to replace employees with AI… but the smartest CEOs are doing the OPPOSITE.”; hookText = “STOP REPLACING HUMANS ❌”; } // Dynamic script generation based on input const mockScript = { topic: selectedNiche, hooks: { verbal: hookVerbal, written: hookText, visual: “Dramatic close-up with intense eye contact, slight lean in” }, structure: “Hook → Problem Reveal → 2-Step Solution → Proof → CTA”, format: “Talking head with strategic B-roll transitions”, value: “Actionable framework with real-world proof”, cta: goal === ‘leads’ ? “Comment ‘GUIDE’ and I’ll send you the complete breakdown” : `Follow for more ${selectedNiche.toLowerCase()} insights that actually work 🔥`, script: [ { serial: 1, voiceover: hookVerbal, visual: “Close-up face shot, concerned/serious expression, direct eye contact, slight head shake”, onScreenText: hookText, imagePrompt: “Cinematic close-up portrait of professional looking concerned directly at camera, dramatic side lighting, shallow depth of field, professional attire, serious expression, high contrast, 4K quality, corporate photography style”, audio: “Record scratch sound effect + tension music begins” }, { serial: 2, voiceover: “After analyzing the data, I discovered something that completely changed my perspective…”, visual: “Quick cut to B-roll: reviewing documents, data on screen, or research materials”, onScreenText: “WHAT THE RESEARCH SHOWS 📊”, imagePrompt: “Professional analyzing data visualizations on large screen, modern office environment, focused expression, blue-toned lighting from screen, photorealistic, 4K quality, business analytics imagery”, audio: “Whoosh transition sound + subtle tech ambience” }, { serial: 3, voiceover: “Here’s the problem everyone’s missing: we’re solving for the wrong thing entirely.”, visual: “Person looking thoughtful, hand on chin, then shaking head with realization”, onScreenText: “THE REAL PROBLEM ⚠️”, imagePrompt: “Professional having realization moment, hand on chin, thoughtful expression transitioning to concerned, natural office lighting, authentic emotion, candid corporate photography, warm tones, 4K”, audio: “Subtle tension music builds” }, { serial: 4, voiceover: “Solution Part 1: Focus on developing these specific human capabilities that AI simply cannot replicate.”, visual: “Demonstrating or gesturing toward key point, confident body language”, onScreenText: “STEP 1: BUILD IRREPLACEABLE SKILLS ✅”, imagePrompt: “Professional demonstrating concept with confident hand gestures, bright clean lighting, instructional photography style, shallow depth of field, hands and face in focus, vibrant colors, 4K quality”, audio: “Upbeat motivational music kicks in + positive chime” }, { serial: 5, voiceover: “Solution Part 2: Integrate AI as a co-pilot, not a replacement – this is where the magic happens.”, visual: “Showing collaboration between human and technology, working together”, onScreenText: “STEP 2: HUMANS + AI = UNSTOPPABLE 🚀”, imagePrompt: “Split screen composition showing human professional collaborating with AI interface, harmonious integration, modern workspace, futuristic yet realistic, balanced blue and warm lighting, 4K quality”, audio: “Whoosh transition + inspiring tech sound” }, { serial: 6, voiceover: “And here’s the proof: Companies that excel on human capital metrics are 4X more likely to have superior financial performance.”, visual: “Showing impressive statistic or graph, pointing to key numbers”, onScreenText: “4X BETTER PERFORMANCE 📈”, imagePrompt: “Clean professional infographic showing upward trending graph with 4X highlighted, modern data visualization, bold colors, high contrast, minimal aesthetic, business success metrics, 4K quality”, audio: “Impactful ‘reveal’ sound + success chime” }, { serial: 7, voiceover: “The biggest mistake? Rushing to replace talent with AI. That’s completely backwards.”, visual: “Showing contrast: wrong approach vs. right approach, clear visual distinction”, onScreenText: “DON’T MAKE THIS MISTAKE ❌”, imagePrompt: “Side-by-side comparison image, left showing wrong approach (replacing humans with AI), right showing correct approach (humans + AI collaboration), contrasting moods, dramatic lighting, 4K quality”, audio: “Warning/alert sound effect” }, { serial: 8, voiceover: “Why does this work? Because AI is copyable – but your unique business model and skilled humans aren’t.”, visual: “Direct eye contact, confident expression, emphatic gesture”, onScreenText: “YOUR REAL ADVANTAGE 💎”, imagePrompt: “Confident business leader making emphatic point, strong eye contact with camera, powerful hand gesture, dramatic lighting, professional attire, inspiring composition, 4K portrait photography”, audio: “Inspiring crescendo music builds” }, { serial: 9, voiceover: goal === ‘leads’ ? “Want the complete framework? Comment ‘GUIDE’ and I’ll send you the full breakdown.” : `Follow for more ${selectedNiche.toLowerCase()} strategies that actually move the needle.`, visual: “Friendly smile, pointing at camera then up to follow/comment, enthusiastic energy”, onScreenText: goal === ‘leads’ ? “COMMENT ‘GUIDE’ BELOW 👇” : “TAP FOLLOW → 🔥”, imagePrompt: “Close-up of enthusiastic professional pointing at camera then upward, genuine smile, call-to-action energy, bright natural lighting, shallow depth of field, approachable yet professional, 4K social media portrait”, audio: “Pop sound effect + upbeat music outro fade” } ], estimatedLength: “55-65 seconds”, retentionTips: [ “Hook grabs attention in first 1-2 seconds with pattern interrupt”, “Problem reveal creates curiosity gap at 5-10 second mark”, “Two-part solution keeps viewer engaged with clear structure”, “Proof point (4X stat) adds credibility and social proof”, “Strong CTA with specific action drives conversions” ] }; setScriptOutput(mockScript); setLoading(false); }, 2500); }; const copyToClipboard = () => { if (!scriptOutput) return; let textToCopy = `VIRAL REEL SCRIPT – ${scriptOutput.topic.toUpperCase()}\n\n`; textToCopy += `=== 6 PILLARS FRAMEWORK ===\n`; textToCopy += `Topic: ${scriptOutput.topic}\n`; textToCopy += `Structure: ${scriptOutput.structure}\n`; textToCopy += `Format: ${scriptOutput.format}\n`; textToCopy += `Value: ${scriptOutput.value}\n`; textToCopy += `CTA: ${scriptOutput.cta}\n\n`; textToCopy += `=== SCENE-BY-SCENE BREAKDOWN ===\n\n`; scriptOutput.script.forEach((scene) => { textToCopy += `— SCENE ${scene.serial} —\n`; textToCopy += `Voiceover: ${scene.voiceover}\n`; textToCopy += `Visual: ${scene.visual}\n`; textToCopy += `On-Screen Text: ${scene.onScreenText}\n`; textToCopy += `AI Image Prompt: ${scene.imagePrompt}\n`; textToCopy += `Audio: ${scene.audio}\n\n`; }); navigator.clipboard.writeText(textToCopy); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const downloadScript = () => { if (!scriptOutput) return; let content = `VIRAL REEL SCRIPT – ${scriptOutput.topic.toUpperCase()}\n`; content += `Generated: ${new Date().toLocaleDateString()}\n\n`; content += `=== 6 PILLARS FRAMEWORK ===\n`; content += `Topic: ${scriptOutput.topic}\n`; content += `Hooks – Verbal: ${scriptOutput.hooks.verbal}\n`; content += `Structure: ${scriptOutput.structure}\n`; content += `Format: ${scriptOutput.format}\n`; content += `Value Proposition: ${scriptOutput.value}\n`; content += `Call-to-Action: ${scriptOutput.cta}\n`; content += `Estimated Length: ${scriptOutput.estimatedLength}\n\n`; content += `=== COMPLETE SCRIPT TABLE ===\n\n`; scriptOutput.script.forEach((scene) => { content += `SCENE ${scene.serial}\n`; content += `${‘=’.repeat(50)}\n`; content += `VOICEOVER:\n${scene.voiceover}\n\n`; content += `VISUAL DESCRIPTION:\n${scene.visual}\n\n`; content += `ON-SCREEN TEXT:\n${scene.onScreenText}\n\n`; content += `AI IMAGE PROMPT (for Midjourney/Ideogram):\n${scene.imagePrompt}\n\n`; content += `AUDIO/SOUND:\n${scene.audio}\n\n`; content += `${‘=’.repeat(50)}\n\n`; }); content += `=== RETENTION OPTIMIZATION TIPS ===\n`; scriptOutput.retentionTips.forEach((tip, i) => { content += `${i + 1}. ${tip}\n`; }); const blob = new Blob([content], { type: ‘text/plain’ }); const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href = url; a.download = `viral-reel-script-${Date.now()}.txt`; a.click(); URL.revokeObjectURL(url); }; return (

{/* Header */}

Transform your ideas into viral Instagram Reels using the proven 6-Pillar Framework

✨ Powered by 1000+ Viral Hooks Database

{/* Input Section */}

Create Your Viral Script

{/* Input Paragraph */}

📝 Your Content Idea / Article / Topic *

setInputText(e.target.value)}
                placeholder=”Paste your article, describe your reel idea, or explain the concept you want to create content about…

Example: ‘I want to create a reel about why AI won’t replace humans in business and the critical skills employees need to work with AI effectively'”
                className=”w-full h-40 px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none resize-none text-gray-700 transition-all”
              />
              <div className="text-xs text-gray-500 mt-2">
                💡 Tip: The more detailed your input, the better your script will be!
              </div>
            </div>

{/* Niche and Goal Selection */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-3">
                  🎯 Niche / Category
                </label>
                <select
                  value={niche}
                  onChange={(e) => setNiche(e.target.value)}
                  className=”w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none text-gray-700 transition-all”
                >
                  <option value="">Auto-detect from content…</option>
                  {niches.map((n) => (
                    <option key={n} value={n}>{n}</option>
                  ))}
                </select>
              </div>

<div>
                <label className="block text-sm font-bold text-gray-700 mb-3">
                  🎯 Primary Goal *
                </label>
                <select
                  value={goal}
                  onChange={(e) => setGoal(e.target.value)}
                  className=”w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-none text-gray-700 transition-all”
                >
                  {goals.map((g) => (
                    <option key={g.value} value={g.value}>{g.label}</option>
                  ))}
                </select>
              </div>
            </div>

{/* Generate Button */}
            <button
              onClick={generateScript}
              disabled={loading}
              className="w-full bg-gradient-to-r from-purple-600 via-purple-500 to-pink-500 text-white font-bold py-5 rounded-xl hover:from-purple-700 hover:via-purple-600 hover:to-pink-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98]"
            >
              {loading ? (
                <>
                  <div className="w-6 h-6 border-3 border-white border-t-transparent rounded-full animate-spin"></div>
                  Generating Your Viral Script…
                </>
              ) : (
                <>
                  <Zap className="w-6 h-6" />
                  Generate Viral Reel Script
                </>
              )}
            </button>
          </div>
        </div>

{/* Output Section */}
        {scriptOutput && (
          <div className="bg-white rounded-3xl shadow-2xl p-6 md:p-10 space-y-8 animate-fade-in">
            {/* Header with Actions */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-6 border-b-2 border-gray-200">
              <h2 className="text-3xl font-bold text-gray-800 flex items-center gap-2">
                <Sparkles className="w-8 h-8 text-pink-500" />
                Your Viral Reel Script
              </h2>
              
              <div className="flex gap-3">
                <button
                  onClick={copyToClipboard}
                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-all flex items-center gap-2 text-sm font-semibold shadow-md"
                >
                  {copied ? <CheckCircle className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
                  {copied ? ‘Copied!’ : ‘Copy’}
                </button>
                <button
                  onClick={downloadScript}
                  className="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-all flex items-center gap-2 text-sm font-semibold shadow-md"
                >
                  <Download className="w-4 h-4" />
                  Download
                </button>
                <button 
                  onClick={() => setScriptOutput(null)}
                  className=”px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-all flex items-center gap-2 text-sm font-semibold shadow-md”
                >
                  <RefreshCw className="w-4 h-4" />
                  New
                </button>
              </div>
            </div>

{/* 6 Pillars Overview */}
            <div>
              <h3 className="text-xl font-bold text-gray-800 mb-4">🎯 6-Pillar Framework Breakdown</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-5 rounded-xl border-2 border-purple-300 shadow-sm">
                  <h4 className="font-bold text-purple-900 mb-2 text-sm">📌 PILLAR #1: TOPIC</h4>
                  <p className="text-gray-700 text-sm">{scriptOutput.topic}</p>
                </div>
                
                <div className="bg-gradient-to-br from-pink-50 to-pink-100 p-5 rounded-xl border-2 border-pink-300 shadow-sm">
                  <h4 className="font-bold text-pink-900 mb-2 text-sm">🎣 PILLAR #2: HOOKS</h4>
                  <p className="text-gray-700 text-xs">
                    <strong>Verbal:</strong> {scriptOutput.hooks.verbal}
                  </p>
                </div>

<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-5 rounded-xl border-2 border-blue-300 shadow-sm">
                  <h4 className="font-bold text-blue-900 mb-2 text-sm">📊 PILLAR #3: STRUCTURE</h4>
                  <p className="text-gray-700 text-sm">{scriptOutput.structure}</p>
                </div>

<div className="bg-gradient-to-br from-green-50 to-green-100 p-5 rounded-xl border-2 border-green-300 shadow-sm">
                  <h4 className="font-bold text-green-900 mb-2 text-sm">🎥 PILLAR #4: FORMAT</h4>
                  <p className="text-gray-700 text-sm">{scriptOutput.format}</p>
                </div>

<div className="bg-gradient-to-br from-yellow-50 to-yellow-100 p-5 rounded-xl border-2 border-yellow-300 shadow-sm">
                  <h4 className="font-bold text-yellow-900 mb-2 text-sm">💎 PILLAR #5: VALUE</h4>
                  <p className="text-gray-700 text-sm">{scriptOutput.value}</p>
                </div>

<div className="bg-gradient-to-br from-red-50 to-red-100 p-5 rounded-xl border-2 border-red-300 shadow-sm">
                  <h4 className="font-bold text-red-900 mb-2 text-sm">🎯 PILLAR #6: CTA</h4>
                  <p className="text-gray-700 text-sm">{scriptOutput.cta}</p>
                </div>
              </div>
            </div>

{/* Script Table */}
            <div>
              <h3 className="text-xl font-bold text-gray-800 mb-4">🎬 Complete Scene-by-Scene Script</h3>
              <div className="overflow-x-auto rounded-xl border-2 border-gray-200 shadow-lg">
                <table className="w-full border-collapse min-w-[1400px]">
                  <thead>
                    <tr className="bg-gradient-to-r from-purple-600 via-purple-500 to-pink-500 text-white">
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '50px'}}>#</th>
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '250px'}}>Voiceover Script</th>
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '200px'}}>Visual Description</th>
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '180px'}}>On-Screen Text</th>
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '350px'}}>AI Image Prompt (Midjourney/Ideogram)</th>
                      <th className="p-4 text-left font-bold text-sm whitespace-nowrap" style={{width: '180px'}}>Sound/Audio</th>
                    </tr>
                  </thead>
                  <tbody>
                    {scriptOutput.script.map((row, index) => (
                      <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'} style={{borderBottom: '1px solid #e5e7eb'}}>
                        <td className="p-4 align-top font-bold text-purple-600 text-lg" style={{width: '50px'}}>
                          {row.serial}
                        </td>
                        <td className="p-4 align-top text-sm text-gray-800 leading-relaxed" style={{width: '250px'}}>
                          <div className="break-words">{row.voiceover}</div>
                        </td>
                        <td className="p-4 align-top text-xs text-gray-600 leading-relaxed" style={{width: '200px'}}>
                          <div className="break-words">{row.visual}</div>
                        </td>
                        <td className="p-4 align-top font-semibold text-pink-600 text-sm leading-relaxed" style={{width: '180px'}}>
                          <div className="break-words">{row.onScreenText}</div>
                        </td>
                        <td className="p-4 align-top bg-blue-50" style={{width: '350px'}}>
                          <div className="flex items-start gap-2">
                            <span className="text-blue-600 text-lg flex-shrink-0">🎨</span>
                            <span className="text-xs text-gray-700 leading-relaxed break-words">{row.imagePrompt}</span>
                          </div>
                        </td>
                        <td className="p-4 align-top text-xs text-gray-600 leading-relaxed" style={{width: '180px'}}>
                          <div className="break-words">{row.audio}</div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
                <span>💡</span>
                <span>Scroll horizontally to view all columns. Copy AI image prompts directly to Midjourney or Ideogram.</span>
              </div>
            </div>

{/* Retention Tips */}
            <div className="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-xl border-2 border-purple-200">
              <h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center gap-2">
                <TrendingUp className="w-5 h-5 text-purple-600" />
                Retention Optimization Tips
              </h3>
              <ul className="space-y-2">
                {scriptOutput.retentionTips.map((tip, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-gray-700">
                    <span className="text-purple-600 font-bold">✓</span>
                    <span>{tip}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-4 pt-4 border-t border-purple-200">
                <p className="text-sm text-gray-600">
                  <strong>Estimated Length:</strong> {scriptOutput.estimatedLength}
                </p>
              </div>
            </div>
          </div>
        )}

{/* Footer Info */}
        {!scriptOutput && (
          <div className="text-center text-white mt-8 space-y-2">
            <p className="text-sm opacity-90">✨ Leveraging 1000+ proven viral hooks</p>
            <p className="text-sm opacity-90">🚀 Optimized for maximum reach, retention, and conversions</p>
            <p className="text-sm opacity-90">🎯 Based on analyzing thousands of viral reels</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default ViralReelGenerator;    </div>

</div>
		</div>	</article>
</div>

<h3 class="comments-title">
			<span>0 Comments</span>		</h3>

<ul class="commentlist" >
                    </ul>
        	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/uncategorized/claude-embed-test-page/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://www.videoworks.in/wp-comments-post.php" method="post" id="commentform" class="comment-form">Your email address will not be published. Required fields are marked *<div class="comment-form-comment">
								<textarea id="comment" class="form-control" rows="5" name="comment" placeholder="Comment*" required="required">

Save my name, email, and website in this browser for the next time I comment.

Claude Embed Test Page

Viral Reel Script Generator

Create Your Viral Script