// scenes-a.jsx — Escenas 1-5. Loaded after video-lib.jsx. Exports to window.
// entry helper: returns {op, sc, ty} for an element appearing at `appear`
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 };
}
// ── small geometric pictograms ───────────────────────────────────────────────
function IconSensor({ c = T.cyan, t = 0 }) {
const pulse = 0.5 + 0.5 * Math.sin(t * 3);
return (
);
}
function IconCPU({ c = T.cyan }) {
return (
);
}
function IconValve({ c = T.amber, t = 0 }) {
return (
);
}
function IconMonitor({ c = T.cyan, t = 0 }) {
const b = 0.6 + 0.4 * Math.sin(t * 2.4);
return (
);
}
// ═══════════════════════ SCENE 1 — APERTURA ═══════════════════════
function Scene1({ start, dur }) {
const t = useTime();
const s = start;
const tiles = [
{ l: 'REFINERÍA', x: 0, y: 0 }, { l: 'PLANTA DE AGUA', x: 1, y: 0 }, { l: 'LÍNEA DE PRODUCCIÓN', x: 2, y: 0 },
{ l: 'ROBOT INDUSTRIAL', x: 0, y: 1 }, { l: 'SALA DE CONTROL', x: 1, y: 1 }, { l: 'PANTALLA SCADA', x: 2, y: 1 },
];
const lt = t - s;
const gridZoom = 1 + 0.07 * clamp(lt / dur, 0, 1);
const cw = 500, ch = 320, gap = 20;
const gw = cw * 3 + gap * 2, gh = ch * 2 + gap;
return (
{/* montage mosaic */}
{tiles.map((tl, i) => {
const a = s + 0.15 + i * 0.13;
const { op, sc } = pop(t, a, 0.6, 0);
return (
);
})}
{/* darkening scrim for legibility */}
Cada día usas cientos de productos sin pensar cómo llegaron a ti.
El agua que bebes.La energía de tu hogar.Los medicamentos que te cuidan.Los alimentos que consumes.
Detrás de todo existe un mundo invisible que mantiene viva nuestra sociedad.
La industria de procesos.
Y hoy entras en ella.
);
}
// ═══════════════════════ SCENE 2 — ¿POR QUÉ IMPORTA? ═══════════════════════
function Side({ side, label, color, items, slotLabel, t, appear }) {
const left = side === 'L';
const { op, ty } = pop(t, appear, 0.6, 24);
return (
);
}
function Scene2({ start, dur }) {
const t = useTime();
const s = start;
const lt = t - s;
// divider sweep position
const sweep = clamp((lt - 0.6) / 1.0, 0, 1);
const dx = 960;
return (
{/* divider */}
Los procesos crecieron. La producción aumentó. La precisión se volvió crítica.
La automatización nació para resolver ese desafío.
Más producción · Más seguridad · Más calidad.
);
}
// ═══════════════════════ SCENE 3 — CUATRO PILARES ═══════════════════════
function Pillar({ no, title, sub, Icon, iconColor, x, appear, t, last }) {
const { op, sc, ty } = pop(t, appear, 0.55, 22);
const w = 332, h = 340;
return (
0{no}
{title}
{sub}
);
}
function Scene3({ start, dur }) {
const t = useTime();
const s = start;
const xs = [200, 590, 980, 1370];
const appears = [s + 3.0, s + 5.4, s + 7.8, s + 10.2];
const cy = 570;
return (
Que un proceso opere por sí mismo.
Cuatro pilares sostienen todo sistema automatizado
{/* connecting arrows between pillars */}
{[0, 1, 2].map(i => {
const ax = xs[i] + 332, bx = xs[i + 1];
const show = t > appears[i + 1] - 0.2;
const e = clamp((t - (appears[i + 1] - 0.2)) / 0.5, 0, 1);
return show ? (
) : null;
})}
La columna vertebral de la industria moderna.
);
}
// ═══════════════════════ SCENE 4 — INDUSTRIAS ═══════════════════════
function Scene4({ start, dur }) {
const t = useTime();
const s = start;
const cx = 960, cy = 540, R = 360;
const inds = ['Petróleo y Gas', 'Alimentos y Bebidas', 'Agua Potable', 'Minería', 'Farmacéutica', 'Energía Eléctrica', 'Papel y Celulosa'];
const n = inds.length;
const nodes = inds.map((name, i) => {
const ang = -Math.PI / 2 + (i * 2 * Math.PI) / n;
return { name, x: cx + Math.cos(ang) * R, y: cy + Math.sin(ang) * R, ang };
});
const centerPop = pop(t, s + 0.6, 0.6, 0);
return (
{/* radial connectors */}
{nodes.map((nd, i) => (
))}
{/* center hub */}
Automatización
{/* industry chips */}
{nodes.map((nd, i) => {
const { op, sc } = pop(t, s + 1.7 + i * 0.18, 0.5, 0);
return (
◦{nd.name}
);
})}
Está presente en prácticamente todas las industrias.
Donde haya un proceso que controlar, hay algo que automatizar.
);
}
// ═══════════════════════ SCENE 5 — PROFESIONALES ═══════════════════════
function RoleCard({ tag, role, desc, x, y, appear, t, accent }) {
const { op, sc, ty } = pop(t, appear, 0.5, 20);
return (
{tag}
{role}
{desc}
);
}
function Scene5({ start, dur }) {
const t = useTime();
const s = start;
const roles = [
{ tag: 'CAMPO', role: 'Operador', desc: 'Supervisa la operación día a día.', a: T.cyan },
{ tag: 'INSTRUMENTACIÓN', role: 'Instrumentista', desc: 'Mantiene sensores y transmisores.', a: T.cyan },
{ tag: 'ENERGÍA', role: 'Electricista industrial', desc: 'Garantiza la energía de la planta.', a: T.amber },
{ tag: 'PROCESOS', role: 'Ingeniero de procesos', desc: 'Diseña cómo opera la planta.', a: T.cyan },
{ tag: 'CONTROL', role: 'Ing. de automatización', desc: 'Crea la inteligencia que controla todo.', a: T.amber },
{ tag: 'SUPERVISIÓN', role: 'Operador SCADA', desc: 'Monitorea desde la sala de control.', a: T.cyan },
];
const cols = [310, 810, 1310 - 30];
const gx = [300, 800, 1300 - 20];
const positions = roles.map((_, i) => ({ x: 250 + (i % 3) * 490, y: 300 + Math.floor(i / 3) * 210 }));
return (
Una planta funciona por el trabajo coordinado de muchos.
{roles.map((r, i) => (
))}
Descubrirás cómo convertirte en uno de ellos.
);
}
Object.assign(window, { Scene1, Scene2, Scene3, Scene4, Scene5 });