Gerador de Showreel de Vídeo em Arquivo HTML Único
De Wikiprompt, a enciclopédia livre de prompts
Gerador de Showreel de Vídeo em Arquivo HTML Único Um prompt abrangente para construir um gerador de showreel de vídeo em um único arquivo HTML, cobrindo storyboard, roteiro, sequência visual, direção de áudio e recursos de lista de verificação de produção com persistência de dados.
Conteúdo do PromptSalvar
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Showreel Studio · generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: #f1f5f9;
color: #1e293b;
transition: background 0.3s, color 0.3s;
padding: 24px 20px;
}
body.dark {
background: #0f172a;
color: #e2e8f0;
}
.app {
max-width: 1400px;
margin: 0 auto;
}
h1 {
font-weight: 700;
font-size: 2.2rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
h1 small {
font-weight: 400;
font-size: 0.9rem;
opacity: 0.7;
background: rgba(100, 116, 139, 0.2);
padding: 4px 12px;
border-radius: 30px;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
margin: 20px 0 30px;
align-items: center;
justify-content: space-between;
}
.toolbar .actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
button, .btn-like {
background: white;
border: 1px solid #cbd5e1;
padding: 8px 16px;
border-radius: 40px;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
color: #1e293b;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
body.dark button, body.dark .btn-like {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
button:hover, .btn-like:hover {
border-color: #94a3b8;
background: #f8fafc;
}
body.dark button:hover {
background: #283548;
}
button.primary {
background: #4f46e5;
border-color: #4f46e5;
color: white;
}
button.primary:hover {
background: #4338ca;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
margin-top: 20px;
}
.card {
background: white;
border-radius: 24px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
border: 1px solid #e2e8f0;
transition: 0.2s;
}
body.dark .card {
background: #1e293b;
border-color: #334155;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card h3 span {
font-size: 0.75rem;
background: #e2e8f0;
padding: 4px 8px;
border-radius: 30px;
font-weight: 500;
}
body.dark .card h3 span {
background: #334155;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0;
}
.field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 150px;
}
label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
opacity: 0.7;
}
input, select, textarea {
background: #f8fafc;
border: 1px solid #d1d9e6;
border-radius: 16px;
padding: 10px 14px;
font-size: 0.9rem;
outline: none;
transition: 0.2s;
color: #1e293b;
}
body.dark input, body.dark select, body.dark textarea {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
textarea {
min-height: 70px;
resize: vertical;
}
.scene-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0;
}
.scene-item {
background: #f8fafc;
border-radius: 16px;
padding: 14px;
border-left: 4px solid #4f46e5;
}
body.dark .scene-item {
background: #0f172a;
}
.scene-item .shot-type {
font-weight: 600;
font-size: 0.8rem;
background: #e0e7ff;
padding: 2px 8px;
border-radius: 30px;
display: inline-block;
margin-bottom: 6px;
}
.badge {
background: #e2e8f0;
padding: 4px 10px;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 500;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.mt-2 {
margin-top: 12px;
}
.checklist-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
body.dark .checklist-item {
border-color: #334155;
}
.checklist-item input[type="checkbox"] {
width: 18px;
height: 18px;
}
.export-btn {
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 30px;
}
.color-dot {
width: 16px;
height: 16px;
border-radius: 20px;
display: inline-block;
}
.palette {
display: flex;
gap: 6px;
margin: 8px 0;
}
.audio-note {
background: #f1f5f9;
border-radius: 12px;
padding: 8px 12px;
font-size: 0.85rem;
}
body.dark .audio-note {
background: #0f172a;
}
.json-actions {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
.hidden {
display: none;
}
.placeholder-img {
background: #cbd5e1;
height: 70px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
font-size: 0.7rem;
font-weight: 500;
margin: 8px 0;
}
body.dark .placeholder-img {
background: #283548;
color: #94a3b8;
}
</style>
</head>
<body>
<div class="app">
<div class="toolbar">
<h1>🎬 Showreel <small>generator</small></h1>
<div class="actions">
<button id="darkModeToggle" class="btn-like">🌙 dark</button>
<button id="primaryColorBtn" class="btn-like">🎨 accent</button>
<button id="exportJsonBtn" class="btn-like">⬇️ JSON</button>
<button id="importJsonBtn" class="btn-like">⬆️ import</button>
<button id="exportFullReport" class="primary">📄 full report</button>
</div>
</div>
<!-- brief & storyboard & script -->
<div class="grid">
<!-- PROJECT BRIEF -->
<div class="card">
<h3>📋 brief <span>template</span></h3>
<div class="row">
<div class="field"><label>project</label><input id="projectName" value="Aurora launch" placeholder="name"></div>
<div class="field"><label>length</label><select id="videoLength"><option>15s</option><option selected>30s</option><option>60s</option></select></div>
</div>
<div class="row">
<div class="field"><label>tone</label><select id="toneSelect"><option>Professional</option><option>Casual</option><option selected>Dramatic</option><option>Educational</option></select></div>
<div class="field"><label>audience</label><input id="audience" value="creators"></div>
</div>
<div class="field"><label>key message</label><textarea id="keyMessage">Bold new era of motion</textarea></div>
<div class="field"><label>style refs</label><input id="styleRefs" value="neon, cinematic, fast cuts"></div>
<div class="row mt-2">
<button id="saveBriefBtn" class="btn-like">💾 save brief</button>
<button id="templateBtn" class="btn-like">📌 templates</button>
</div>
</div>
<!-- STORYBOARD -->
<div class="card">
<h3>🎞️ storyboard <span>auto</span></h3>
<div id="storyboardContainer" class="scene-list"></div>
<div class="row">
<button id="regenerateScenes" class="btn-like">🔄 regenerate</button>
<button id="exportStoryboardBtn" class="btn-like">🖼️ export</button>
</div>
</div>
<!-- SCRIPT GENERATOR -->
<div class="card">
<h3>📝 script <span>ai</span></h3>
<div class="row">
<div class="field"><label>length</label><select id="scriptLength"><option>Short (15s)</option><option selected>Medium (30s)</option><option>Long (60s+)</option></select></div>
<div class="field"><label>tone</label><select id="scriptTone"><option>Professional</option><option>Casual</option><option selected>Dramatic</option><option>Humorous</option></select></div>
</div>
<div class="row">
<div class="field"><label>voiceover</label><select id="voiceoverType"><option>Male</option><option>Female</option><option selected>Neutral</option></select></div>
</div>
<textarea id="scriptOutput" rows="5">[HOOK] What if motion could speak? [BODY] Aurora changes everything. [CTA] Experience it now.</textarea>
<div class="row mt-2">
<button id="generateScriptBtn" class="btn-like">✨ generate</button>
<button id="exportScriptBtn" class="btn-like">📃 export txt</button>
</div>
</div>
</div>
<!-- second row: visual sequence, audio, checklist -->
<div class="grid">
<!-- VISUAL SEQUENCE -->
<div class="card">
<h3>🌈 visual sequence <span>plan</span></h3>
<div id="visualSequenceContainer"></div>
<div class="palette" id="paletteContainer"></div>
<button id="customizeVisualBtn" class="btn-like mt-2">🎲 shuffle visuals</button>
</div>
<!-- AUDIO DIRECTION -->
<div class="card">
<h3>🎧 audio direction</h3>
<div class="row">
<div class="field"><label>music mood</label><select id="musicMood"><option>Upbeat</option><option selected>Cinematic</option><option>Relaxed</option><option>Dramatic</option></select></div>
<div class="field"><label>voiceover style</label><select id="voStyle"><option>Narrative</option><option selected>Bold</option><option>Soft</option></select></div>
</div>
<div class="row">
<div class="field"><label>VO level</label><input type="range" id="voLevel" min="0" max="100" value="70"></div>
<div class="field"><label>music level</label><input type="range" id="musicLevel" min="0" max="100" value="50"></div>
</div>
<div class="audio-note" id="audioNote">🎵 Cinematic underscore · whoosh transitions · bold VO</div>
<button id="exportAudioBtn" class="btn-like mt-2">🎼 export notes</button>
</div>
<!-- PRODUCTION CHECKLIST -->
<div class="card">
<h3>✅ checklist <span>auto</span></h3>
<div id="checklistContainer"></div>
<div class="row mt-2">
<button id="addChecklistItem" class="btn-like">+ add item</button>
<button id="exportChecklistBtn" class="btn-like">📋 export</button>
</div>
</div>
</div>
<!-- final output preview -->
<div class="card" style="margin-top: 24px;">
<h3>📦 final output <span>preview</span></h3>
<div id="finalPreview" style="font-size:0.9rem; line-height:1.6;"></div>
<button id="compileReportBtn" class="primary mt-2" style="margin-top:12px;">🧩 compile full report</button>
</div>
<!-- hidden import input -->
<input type="file" id="importFileInput" accept=".json" class="hidden">
</div>
<script>
(function(){
// ---------- state ----------
const state = {
brief: {
project: 'Aurora launch',
length: '30s',
tone: 'Dramatic',
audience: 'creators',
message: 'Bold new era of motion',
styleRefs: 'neon, cinematic, fast cuts'
},
scenes: [],
script: 'What if motion could speak? Aurora changes everything. Experience it now.',
visuals: [],
audio: { music: 'Cinematic', voStyle: 'Bold', voLevel: 70, musicLevel: 50 },
checklist: ['Camera + lens kit', 'Lighting setup', 'Location permit', 'Voiceover record', 'Color grade'],
palette: ['#4f46e5', '#0ea5e9', '#f43f5e', '#f59e0b']
};
// ---------- DOM refs ----------
const $ = id => document.getElementById(id);
const projectName = $('projectName'), videoLength = $('videoLength'), toneSelect = $('toneSelect');
const audience = $('audience'), keyMessage = $('keyMessage'), styleRefs = $('styleRefs');
const storyboardContainer = $('storyboardContainer');
const scriptOutput = $('scriptOutput');
const visualSequenceContainer = $('visualSequenceContainer');
const paletteContainer = $('paletteContainer');
const checklistContainer = $('checklistContainer');
const finalPreview = $('finalPreview');
const musicMood = $('musicMood'), voStyle = $('voStyle'), voLevel = $('voLevel'), musicLevel = $('musicLevel');
// ---------- helpers ----------
function generateScenes() {
const tone = state.brief.tone || 'Dramatic';
const baseScenes = [
{ shot: 'Wide', desc: 'Establishing shot - cityscape at dusk', overlay: 'Aurora', duration: '4s' },
{ shot: 'Medium', desc: 'Product reveal - sleek device', overlay: 'Innovation', duration: '6s' },
{ shot: 'Close-up', desc: 'Detail: glowing edge', overlay: 'Precision', duration: '5s' },
{ shot: 'Medium', desc: 'User interaction - dynamic', overlay: 'Empower', duration: '5s' },
{ shot: 'Wide', desc: 'Closing shot - brand logo', overlay: 'Aurora', duration: '4s' }
];
if (tone === 'Professional') baseScenes[1].desc = 'Office environment - product demo';
if (tone === 'Casual') baseScenes[2].desc = 'Lifestyle candid - handheld';
if (tone === 'Educational') baseScenes[3].desc = 'Explainer sequence - diagram';
state.scenes = baseScenes.map((s, i) => ({
...s,
id: `scene-${i}-${Date.now()}`,
refImage: null
}));
renderStoryboard();
}
function renderStoryboard() {
storyboardContainer.innerHTML = state.scenes.map(sc => `
<div class="scene-item">
<div class="flex-between">
<span class="shot-type">${sc.shot}</span>
<span class="badge">${sc.duration}</span>
</div>
<div style="margin:6px 0; font-weight:500;">${sc.desc}</div>
<div style="font-size:0.8rem; opacity:0.7;">📝 overlay: "${sc.overlay}"</div>
<div class="placeholder-img">🖼️ ref image (optional)</div>
</div>
`).join('');
}
function generateVisuals() {
const visuals = state.scenes.map((sc, idx) => ({
scene: `Scene ${idx+1}`,
visual: ['stock city', 'product close-up', 'abstract gradient', 'lifestyle', 'logo reveal'][idx % 5],
color: state.palette[idx % state.palette.length]
}));
state.visuals = visuals;
renderVisuals();
}
function renderVisuals() {
visualSequenceContainer.innerHTML = state.visuals.map((v, i) => `
<div style="display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #e2e8f0;">
<span style="font-weight:500;">${v.scene}</span>
<span style="display:flex; gap:8px; align-items:center;">
<span class="badge">${v.visual}</span>
<span class="color-dot" style="background:${v.color}"></span>
</span>
</div>
`).join('');
paletteContainer.innerHTML = state.palette.map(c => `<span class="color-dot" style="background:${c}; width:24px; height:24px;"></span>`).join('');
}
function renderChecklist() {
checklistContainer.innerHTML = state.checklist.map((item, idx) => `
<div class="checklist-item">
<input type="checkbox" data-idx="${idx}" ${idx === 0 ? 'checked' : ''}>
<span>${item}</span>
</div>
`).join('');
}
function updateBriefFromInputs() {
state.brief = {
project: projectName.value,
length: videoLength.value,
tone: toneSelect.value,
audience: audience.value,
message: keyMessage.value,
styleRefs: styleRefs.value
};
}
function updateAudioFromInputs() {
state.audio = {
music: musicMood.value,
voStyle: voStyle.value,
voLevel: voLevel.value,
musicLevel: musicLevel.value
};
$('audioNote').innerText = `🎵 ${musicMood.value} · ${voStyle.value} VO · balance ${voLevel.value}/${musicLevel.value}`;
}
function renderFinalPreview() {
updateBriefFromInputs();
finalPreview.innerHTML = `
<div><strong>${state.brief.project}</strong> · ${state.brief.length} · ${state.brief.tone}</div>
<div style="margin-top:8px;">🎬 ${state.scenes.length} scenes · 🎙️ ${state.script.slice(0,40)}…</div>
<div style="opacity:0.8;">🎨 palette: ${state.palette.join(' | ')} · 🎧 ${state.audio.music}</div>
<div style="margin-top:6px;">✅ checklist: ${state.checklist.length} items</div>
`;
}
// ---------- export / import ----------
function exportJSON() {
updateBriefFromInputs(); updateAudioFromInputs();
const data = { ...state, brief: state.brief, audio: state.audio };
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = url; a.download = 'showreel_project.json'; a.click();
URL.revokeObjectURL(url);
}
function importJSON(file) {
const reader = new FileReader();
reader.onload = (e) => {
try {
const parsed = JSON.parse(e.target.result);
Object.assign(state, parsed);
// sync inputs
projectName.value = state.brief.project || '';
videoLength.value = state.brief.length || '30s';
toneSelect.value = state.brief.tone || 'Professional';
audience.value = state.brief.audience || '';
keyMessage.value = state.brief.message || '';
styleRefs.value = state.brief.styleRefs || '';
scriptOutput.value = state.script || '';
musicMood.value = state.audio.music || 'Cinematic';
voStyle.value = state.audio.voStyle || 'Bold';
voLevel.value = state.audio.voLevel || 70;
musicLevel.value = state.audio.musicLevel || 50;
if (state.scenes.length) renderStoryboard(); else generateScenes();
if (state.visuals.length) renderVisuals(); else generateVisuals();
renderChecklist(); renderFinalPreview(); updateAudioFromInputs();
} catch (err) { alert('invalid JSON'); }
};
reader.readAsText(file);
}
// ---------- event listeners ----------
$('saveBriefBtn').onclick = () => { updateBriefFromInputs(); renderFinalPreview(); alert('brief saved'); };
$('templateBtn').onclick = () => {
const templates = ['Product launch', 'Portfolio', 'Promo', 'Educational', 'Social ad'];
const pick = templates[Math.floor(Math.random()*templates.length)];
projectName.value = pick + ' showreel';
keyMessage.value = 'Show the world ' + pick.toLowerCase();
updateBriefFromInputs(); renderFinalPreview();
};
$('regenerateScenes').onclick = () => { updateBriefFromInputs(); generateScenes(); generateVisuals(); renderFinalPreview(); };
$('exportStoryboardBtn').onclick = () => {
const text = state.scenes.map(s => `${s.shot} | ${s.desc} | ${s.overlay} | ${s.duration}`).join('\n');
alert('Storyboard export:\n'+text);
};
$('generateScriptBtn').onclick = () => {
const tone = $('scriptTone').value;
const len = $('scriptLength').value;
const vo = $('voiceoverType').value;
let script = '';
if (tone === 'Dramatic') script = `[HOOK] In a world of silence... [BODY] Aurora breaks through. [CTA] Be the first.`;
else if (tone === 'Professional') script = `[HOOK] Efficiency meets design. [BODY] Aurora delivers. [CTA] Request a demo.`;
else if (tone === 'Casual') script = `[HOOK] Hey, check this out. [BODY] Aurora is here. [CTA] Grab yours.`;
else script = `[HOOK] Did you know? [BODY] Aurora changes the game. [CTA] Learn more.`;
if (len.includes('15')) script = script.replace('[BODY]', '[BODY] Quick impact.');
if (len.includes('60')) script += ' [EXTENDED] More details inside.';
scriptOutput.value = script;
state.script = script;
renderFinalPreview();
};
$('exportScriptBtn').onclick = () => {
const blob = new Blob([scriptOutput.value], {type:'text/plain'});
const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download='script.txt'; a.click();
};
$('customizeVisualBtn').onclick = () => {
const visuals = ['abstract 3D', 'urban neon', 'product macro', 'aerial drone', 'studio light'];
state.visuals = state.visuals.map((v,i)=>({...v, visual: visuals[(i+2)%visuals.length]}));
renderVisuals(); renderFinalPreview();
};
$('exportAudioBtn').onclick = () => {
updateAudioFromInputs();
alert(`Audio notes:\nMusic: ${state.audio.music}\nVO: ${state.audio.voStyle}\nBalance: ${state.audio.voLevel}/${state.audio.musicLevel}`);
};
$('addChecklistItem').onclick = () => {
const item = prompt('New checklist item');
if(item) { state.checklist.push(item); renderChecklist(); renderFinalPreview(); }
};
$('exportChecklistBtn').onclick = () => {
alert('Checklist:\n'+state.checklist.map((c,i)=>(i+1)+'. '+c).join('\n'));
};
$('compileReportBtn').onclick = () => {
updateBriefFromInputs(); updateAudioFromInputs();
renderFinalPreview();
alert('Full report compiled – see preview above');
};
$('exportFullReport').onclick = () => {
updateBriefFromInputs(); updateAudioFromInputs();
const report = `SHOWREEL REPORT\n${state.brief.project} | ${state.brief.length} | ${state.brief.tone}\n\nSCENES:\n${state.scenes.map(s=>`- ${s.shot}: ${s.desc}`).join('\n')}\n\nSCRIPT:\n${scriptOutput.value}\n\nAUDIO: ${state.audio.music} / ${state.audio.voStyle}\nCHECKLIST: ${state.checklist.join(', ')}`;
const blob = new Blob([report], {type:'text/plain'});
const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download='showreel_report.txt'; a.click();
};
$('exportJsonBtn').onclick = exportJSON;
$('importJsonBtn').onclick = () => $('importFileInput').click();
$('importFileInput').addEventListener('change', (e) => {
if(e.target.files[0]) importJSON(e.target.files[0]);
e.target.value = '';
});
$('darkModeToggle').onclick = () => document.body.classList.toggle('dark');
$('primaryColorBtn').onclick = () => {
const colors = ['#4f46e5', '#0d9488', '#c026d3', '#ea580c'];
const next = colors[Math.floor(Math.random()*colors.length)];
document.documentElement.style.setProperty('--accent', next);
document.querySelectorAll('.scene-item').forEach(el => el.style.borderLeftColor = next);
document.querySelectorAll('button.primary').forEach(b => b.style.background = next);
};
// listeners for audio update
[musicMood, voStyle, voLevel, musicLevel].forEach(el => el.addEventListener('input', () => { updateAudioFromInputs(); renderFinalPreview(); }));
// initial render
generateScenes();
generateVisuals();
renderChecklist();
updateAudioFromInputs();
renderFinalPreview();
// sync script area
scriptOutput.value = state.script;
})();
</script>
</body>
</html>
Entre para ver o prompt completo
Continuar com:
Ao entrar, você concorda com nossos Termos de uso e Política de privacidade
Uso
Este prompt foi projetado para uso com coding. Copie o conteúdo acima e cole na sua ferramenta de IA preferida.
Para melhores resultados, personalize os marcadores (indicados por colchetes ou maiúsculas) com seus requisitos específicos.
Referências
- Categoria: Prompts de coding
- Fonte: https://x.com/eyishazyer/status/2073109278379171899
Discussão
0 comentários