);
}
/* etiquetas apiladas (opción G): bloques sólidos pegados a un lado, acumulativos.
side: 'l' (izquierda) | 'r' (derecha). top: separación desde arriba. */
function TagStack({ lt, items, side, top, gap }) {
const isR = side === 'r';
let active = -1; items.forEach((it,i)=>{ if (lt >= (it.at||0)) active = i; });
return (
{items.map((it,i) => {
const e = clamp(P(lt, it.at||0, 0.5, E.outBack), 0, 1);
const on = i === active;
return (
{it.t}
);
})}
);
}
/* caption inferior (lower-third) sobre scrim */
function Caption({ lt, kicker, title, sub }) {
return (
{kicker ? (
{kicker}
) : null}
{title}
{sub ?
{sub}
: null}
);
}
/* MARCO PRODUCTO — el héroe de casi todas las escenas */
function VideoSlot({ src, lt, fit='contain', fitDur }) {
const ref = useRef(null);
// precarga en cuanto se monta para que no entre "en frío" al cortar la escena
useEffect(() => { const v = ref.current; if (!v) return;
try { v.load(); } catch(e){}
if (MEDIA.playing) v.play().catch(()=>{}); }, []);
useEffect(() => { const v = ref.current; if (!v) return;
if (MEDIA.playing) { if (v.paused) v.play().catch(()=>{}); } else v.pause(); }, [lt]);
// solo corrige la sincronía si la desviación es grande (no reescribir currentTime cada frame: congela el vídeo)
useEffect(() => { const v = ref.current; if (!v || !v.duration) return;
if (fitDur) {
// encaja el vídeo ENTERO dentro de la duración de la escena (acelera/ralentiza un poco)
v.playbackRate = Math.max(0.5, Math.min(2, v.duration / fitDur));
const want = Math.min((clamp(lt, 0, fitDur) / fitDur) * v.duration, v.duration - 0.05);
if (Math.abs(v.currentTime - want) > 0.7) { try { v.currentTime = want; } catch(e){} }
return;
}
const want = lt % v.duration; if (Math.abs(v.currentTime - want) > 0.7) { try { v.currentTime = want; } catch(e){} } }, [lt]);
return ;
}
/* contenido alto simulado para que se vea el scroll en el preview */
function TallPlaceholder({ title, file }) {
const rows = [0,1,2,3,4,5,6];
return (
{title || 'Captura'}
{file}
{rows.map(i => (
))}
// scroll · {file}
);
}
/* pantalla con borde luminoso (glow), con scroll opcional del contenido */
function GlowScreen({ w, h, file, videoFile, title, lt, scrollFrac, dim=0, chrome=true, radius=22, contentScale=1, videoFit='contain', imgFit='contain', fitDur }) {
const ready = videoFile ? has(videoFile) : has(file);
const ch = chrome ? FR.chrome : 0;
const contentH = h - ch;
const scRef = useRef(null);
const isScroll = (scrollFrac != null) && !videoFile;
let ty = 0;
if (isScroll && scRef.current) ty = -clamp(scrollFrac,0,1) * Math.max(0, scRef.current.scrollHeight - contentH);
return (
{chrome ? : null}
{isScroll ? (
{ready ?
: }
) : (
{ready ? (videoFile ?
: )
: }
)}
{dim > 0 ? : null}
);
}
const rigStyle = (t, op) => ({ position:'absolute', left:'50%', top:'50%', width:0, height:0, transformStyle:'preserve-3d', transform:t, opacity:op });
/* HÉROE 3D — variantes: 'solo' (una pantalla grande con scroll+zoom),
'wall' (central + 2 laterales) y 'pan' (fila de pantallas que recorre la cámara).
Corta entre varias capturas (files) y hace scroll del contenido. */
function Hero({ lt, dur, file, files, videoFile, title, kicker, capTitle, capSub, cam, dir, variant='solo', scroll=false, videoFit='contain', fitVideo=false, soloH=850, children }) {
const ent = E.outCubic(clamp(lt / 0.95, 0, 1));
const d = dir === 'l' ? -1 : 1;
const p = E.inOutCubic(clamp(lt / (dur || 8), 0, 1));
const float = Math.sin(lt*0.7)*9;
const entZ = (1-ent)*-640, entRot = (1-ent)*20*d;
const list = (files && files.length ? files : [videoFile || file]).filter(Boolean);
const n = Math.max(list.length, 1);
const isV = (f) => typeof f === 'string' && f.endsWith('.mp4');
const cutDur = (dur || 8) / n;
const idx = clamp(Math.floor(lt / cutDur), 0, n-1);
const cutLocal = lt - idx*cutDur;
const cutPop = E.outCubic(clamp(cutLocal/0.5, 0, 1));
const scrollFrac = E.inOutCubic(clamp((cutLocal-0.4)/Math.max(cutDur-0.9,0.5), 0, 1));
const cur = list[idx] || list[0];
const G = (f, w, h, o={}) => ;
let rig;
if (variant === 'wall') {
const camZ = lerp(cam?.z0 ?? -150, cam?.z1 ?? 160, p);
const camRot = lerp(cam?.r0 ?? (6*d), cam?.r1 ?? (-3*d), p) + Math.sin(lt*0.4)*0.6;
const sideA = list[(idx+1)%n] || cur, sideB = list[(idx+2)%n] || cur;
rig = (
);
} else if (variant === 'pan') {
const SP = 1480;
// paneo con keyframes: dwell largo en la 2ª captura (-SP) y luego avanza a la 3ª
const camStops = [[0,180],[0.16,0],[0.34,-SP],[0.66,-SP],[0.85,-(n-1)*SP],[1,-(n-1)*SP]];
let camX = camStops[0][1];
for (let k=1;k
{list.map((f,i)=>(
: 
