a luz se lembra dele. } state={state} /> ); } function Slide07({ state }) { return (
mostra o corpo. Mostra o peso dele. } state={state} darken={0.7} /> ); } /* -------------------------------------------------------------- SLIDE 08 — Fechamento · assinatura -------------------------------------------------------------- */ function Slide08({ state }) { const { accentColor: accent, year } = state; return (
Quem filma
na hora certa
não
ilustra
—
lembra.
com background-image inline — contorna bugs de img cross-origin no html-to-image
const cs = window.getComputedStyle(img);
const replacement = document.createElement('div');
replacement.style.cssText = img.style.cssText;
replacement.style.backgroundImage = `url("${dataUrl}")`;
replacement.style.backgroundSize = cs.objectFit === 'cover' ? 'cover' : (cs.objectFit === 'contain' ? 'contain' : '100% 100%');
replacement.style.backgroundPosition = cs.objectPosition || 'center';
replacement.style.backgroundRepeat = 'no-repeat';
// Manter dimensões explícitas
if (!replacement.style.width) replacement.style.width = cs.width;
if (!replacement.style.height) replacement.style.height = cs.height;
img.parentNode.replaceChild(replacement, img);
} catch (e) { console.warn('inline img falhou', src, e); }
}));
// background-image: url(...) inline
const all = root.querySelectorAll('*');
await Promise.all([...all].map(async (el) => {
const bg = el.style && el.style.backgroundImage;
if (!bg || !bg.includes('url(')) return;
const m = bg.match(/url\(["']?([^"')]+)["']?\)/);
if (!m || m[1].startsWith('data:')) return;
try {
const dataUrl = await urlToDataUrl(m[1]);
el.style.backgroundImage = `url("${dataUrl}")`;
} catch (e) { console.warn('inline bg falhou', m[1], e); }
}));
}
/* Captura canvas-based: renderiza html-to-image sobre um canvas que já tem
as fotos de fundo desenhadas. Isso elimina o bug de ![]()
sumindo. */
async function captureSlideAsBlob(slideIdx, pxRatio = 2) {
const wraps = document.querySelectorAll('.slide-wrap');
const target = wraps[slideIdx];
if (!target) throw new Error('slide não encontrado');
// 1) Clonar em container off-screen SEM SCALE — medições corretas 1080×1350
const holder = document.createElement('div');
holder.style.cssText = 'position:fixed;left:-99999px;top:0;width:1080px;height:1350px;background:#000;';
const clone = target.cloneNode(true);
clone.style.cssText = 'width:1080px;height:1350px;position:relative;transform:none;';
holder.appendChild(clone);
document.body.appendChild(holder);
await new Promise(r => setTimeout(r, 50));
// 2) Coletar ![]()
full-bleed (as que fazem cover do slide inteiro) e desenhá-las no canvas
const holderRect = holder.getBoundingClientRect();
const photoImgs = [];
clone.querySelectorAll('img').forEach(img => {
const src = img.getAttribute('src');
if (!src) return;
const cs = window.getComputedStyle(img);
// Só fotos full-bleed: position:absolute + objectFit:cover + tamanho >= 500px
if (cs.position !== 'absolute') return;
if (cs.objectFit !== 'cover') return;
const r = img.getBoundingClientRect();
if (r.width < 500) return;
photoImgs.push({
src,
x: r.left - holderRect.left,
y: r.top - holderRect.top,
w: r.width,
h: r.height,
pos: cs.objectPosition,
el: img,
});
});
// 3) Montar canvas 1080×1350 * pxRatio
const W = 1080, H = 1350;
const canvas = document.createElement('canvas');
canvas.width = W * pxRatio;
canvas.height = H * pxRatio;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 4) Desenhar fotos no canvas (com cover + object-position)
for (const p of photoImgs) {
try {
const dataUrl = await urlToDataUrl(p.src);
const img = await new Promise((res, rej) => {
const im = new Image();
im.onload = () => res(im);
im.onerror = rej;
im.src = dataUrl;
});
const scale = Math.max(p.w / img.naturalWidth, p.h / img.naturalHeight);
const drawW = img.naturalWidth * scale;
const drawH = img.naturalHeight * scale;
let px = 0.5, py = 0.5;
const posParts = (p.pos || '50% 50%').split(/\s+/);
if (posParts[0]) px = parsePos(posParts[0]);
if (posParts[1]) py = parsePos(posParts[1]);
const dx = p.x - (drawW - p.w) * px;
const dy = p.y - (drawH - p.h) * py;
ctx.drawImage(img, dx * pxRatio, dy * pxRatio, drawW * pxRatio, drawH * pxRatio);
// Esconder do clone pra não duplicar no overlay
p.el.style.visibility = 'hidden';
} catch (e) { console.warn('fundo falhou', p.src, e); }
}
// 5) Tornar slide transparente e inlinar logos/monogramas restantes
clone.querySelectorAll('.slide').forEach(s => s.style.background = 'transparent');
const logos = clone.querySelectorAll('img');
await Promise.all([...logos].map(async (img) => {
const src = img.getAttribute('src');
if (!src || src.startsWith('data:')) return;
try { img.setAttribute('src', await urlToDataUrl(src)); } catch {}
}));
await new Promise(r => setTimeout(r, 100));
// 6) Render overlay (texto + logos + gradients) por cima
try {
const overlayBlob = await htmlToImage.toBlob(clone, {
width: 1080, height: 1350, pixelRatio: pxRatio,
backgroundColor: null, cacheBust: false,
});
const overlayImg = await blobToImage(overlayBlob);
ctx.drawImage(overlayImg, 0, 0, canvas.width, canvas.height);
} finally {
document.body.removeChild(holder);
}
return await new Promise(res => canvas.toBlob(res, 'image/png'));
}
function parsePos(v) {
if (v === 'left' || v === 'top') return 0;
if (v === 'right' || v === 'bottom') return 1;
if (v === 'center') return 0.5;
const m = v.match(/([\d.]+)%/);
if (m) return parseFloat(m[1]) / 100;
return 0.5;
}
function blobToImage(blob) {
return new Promise((res, rej) => {
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => { URL.revokeObjectURL(url); res(img); };
img.onerror = rej;
img.src = url;
});
}
async function exportPNG() {
if (busy) return;
setBusy(true); setStatus(`Capturando slide ${String(idx+1).padStart(2,'0')}…`);
try {
const blob = await captureSlideAsBlob(idx);
downloadBlob(blob, `squad-golden-hour-${String(idx+1).padStart(2,'0')}.png`);
setStatus('PNG baixado.');
} catch (e) {
console.error(e);
setStatus('Erro no PNG.');
} finally {
setBusy(false);
setTimeout(() => setStatus(''), 2400);
}
}
async function exportZIP(pxRatio = 2, label = 'ZIP') {
if (busy) return;
setBusy(true);
try {
const zip = new JSZip();
for (let i = 0; i < total; i++) {
setStatus(`${label} · ${String(i+1).padStart(2,'0')}/${String(total).padStart(2,'0')}…`);
const blob = await captureSlideAsBlob(i, pxRatio);
zip.file(`squad-golden-hour-${String(i+1).padStart(2,'0')}.png`, blob);
}
setStatus('Compactando ZIP…');
const zipBlob = await zip.generateAsync({type:'blob'});
const suffix = pxRatio >= 4 ? '-4k' : '';
downloadBlob(zipBlob, `squad-golden-hour${suffix}.zip`);
setStatus(`${label} baixado.`);
} catch (e) {
console.error(e);
setStatus(`Erro no ${label}.`);
} finally {
setBusy(false);
setTimeout(() => setStatus(''), 2400);
}
}
function exportPDF() {
setStatus('Abra a caixa de impressão → Salvar como PDF.');
setTimeout(() => window.print(), 120);
setTimeout(() => setStatus(''), 4200);
}
return (
{idx > 0 && (
)}
{idx < total - 1 && (
)}
);
}
Object.assign(window, { Carousel });
{status &&
);
}
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename;
document.body.appendChild(a); a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 2000);
}
/* --------------------------------------------------------------
Carousel shell
-------------------------------------------------------------- */
function Carousel({ state }) {
const [idx, setIdx] = useState(0);
const SLIDES = [Slide01, Slide02, Slide03, Slide04, Slide05, Slide06, Slide07, Slide08];
const total = SLIDES.length;
const go = (i) => setIdx(Math.max(0, Math.min(total - 1, i)));
const prev = () => go(idx - 1);
const next = () => go(idx + 1);
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowLeft') prev();
if (e.key === 'ArrowRight') next();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [idx]);
return (
{status}
}
{SLIDES.map((S, i) => (
))}
{SLIDES.map((_, i) => (
SQUAD FILM · GOLDEN HOUR · 4:5 · 1080×1350
{String(idx+1).padStart(2,'0')} / {String(total).padStart(2,'0')}