// clase-lib.jsx — shared templates for the Módulo 0 class videos.
// Loaded after animations.jsx + video-lib.jsx. Uses T, DISP, MONO, Cap, Kicker,
// Brackets, Slot, DrawLine, GlobalBG, Scanlines. Exports to window.
function pop(t, appear, d = 0.5, rise = 18) {
const lt = t - appear;
if (lt < 0) return { op: 0, sc: 0.92, ty: rise };
const e = Easing.easeOutCubic(clamp(lt / d, 0, 1));
const eb = Easing.easeOutBack(clamp(lt / d, 0, 1));
return { op: e, sc: 0.92 + 0.08 * eb, ty: (1 - e) * rise };
}
// ── Title card for each class: big number, title, duration tag, objective ────
function TitleCard({ start, dur, claseNo, title, dudur, objetivo }) {
const t = useTime();
const s = start;
const end = start + dur;
if (t < s - 0.02 || t > end + 0.02) return null;
const lt = t - s;
let op = 1;
if (lt < 0.6) op = clamp(lt / 0.6, 0, 1);
else if (t > end - 0.6) op = clamp((end - t) / 0.6, 0, 1);
const big = pop(t, s + 0.3, 0.8, 0);
const ti = pop(t, s + 0.9, 0.7, 20);
const ob = pop(t, s + 2.0, 0.7, 16);
return (
{/* giant ghost number */}
{String(claseNo).padStart(2, '0')}
{title}
Duración {dudur}
{objetivo}
);
}
// ── Section label that slides in (acts as chapter divider inside a class) ────
function Banner({ start, dur, kicker, line, color = T.cyan }) {
const t = useTime();
const s = start, end = s + dur;
if (t < s - 0.02 || t > end + 0.02) return null;
const lt = t - s;
let op = 1;
if (lt < 0.5) op = clamp(lt / 0.5, 0, 1);
else if (t > end - 0.5) op = clamp((end - t) / 0.5, 0, 1);
const bar = Easing.easeOutCubic(clamp(lt / 0.8, 0, 1));
return (
{kicker}
{line}
);
}
// ── Reusable pictograms (industrial line icons) ──────────────────────────────
function IcoSensor({ c = T.cyan, t = 0 }) {
const pulse = 0.5 + 0.5 * Math.sin(t * 3);
return ();
}
function IcoCPU({ c = T.cyan }) {
return ();
}
function IcoValve({ c = T.amber }) {
return ();
}
function IcoMonitor({ c = T.cyan, t = 0 }) {
const b = 0.6 + 0.4 * Math.sin(t * 2.4);
return ();
}
function IcoRobot({ c = T.cyan }) {
return ();
}
function IcoChip({ c = T.cyan }) {
return ();
}
// ── Generic info card (icon + title + sub) ───────────────────────────────────
function InfoCard({ x, y, w = 360, h = 300, no, Icon, iconColor = T.cyan, title, sub, appear, t }) {
const { op, sc, ty } = pop(t, appear, 0.55, 22);
return (
{no != null &&
{String(no).padStart(2, '0')}
}
{Icon &&
}
{title}
{sub}
);
}
// ── Closing card: takeaway line + activity chip ──────────────────────────────
function Closing({ start, dur, line, activityLabel, activity }) {
const t = useTime();
const s = start, end = s + dur;
if (t < s - 0.02 || t > end + 0.02) return null;
const lt = t - s;
let op = 1;
if (lt < 0.6) op = clamp(lt / 0.6, 0, 1);
else if (t > end - 0.6) op = clamp((end - t) / 0.6, 0, 1);
const a = pop(t, s + 1.4, 0.6, 18);
return (
{line}
{activity && (
{activityLabel || 'Actividad'}
{activity}
)}
);
}
// ── Shell: assembles a class video (bg + scenes + chrome + progress) ─────────
function ClassShell({ scenes, claseNo, claseName }) {
let acc = 0;
const timed = scenes.map(sc => { const o = { ...sc, start: acc }; acc += sc.dur; return o; });
const total = acc;
return (
{timed.map((sc, i) => )}
);
}
function ClassChrome({ timed, claseNo, claseName }) {
const t = useTime();
let label = '';
for (const sc of timed) if (t >= sc.start - 0.0001) label = sc.label || '';
return (