// illustrations.jsx — Ilustraciones SVG animadas para cada slide.
// Paleta: usa los tokens del slide (pal.deep, pal.warm, pal.warmDeep, pal.bg, pal.soft, pal.abyss).
// Cada ilustración es minimalista, simbólica, con loops suaves de animación.
// ─── Helpers ────────────────────────────────────────────────────────────
const ILLUS_KEYFRAMES = `
@keyframes illusFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes illusFloatSm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes illusPulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes illusPulseDot { 0%,100% { opacity: .55; r: 2.6; } 50% { opacity: 1; r: 3.4; } }
@keyframes illusGlow { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes illusGlowStrong { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes illusFlicker { 0%,100% { opacity: .9; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.08); } }
@keyframes illusDash { to { stroke-dashoffset: -40; } }
@keyframes illusDashSlow { to { stroke-dashoffset: -80; } }
@keyframes illusRise { 0% { transform: translateY(8px); opacity: 0; } 60%,100% { transform: translateY(0); opacity: 1; } }
@keyframes illusFall { 0% { transform: translateY(-8px); opacity: 0; } 60%,100% { transform: translateY(0); opacity: 1; } }
@keyframes illusDrop { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(28px); opacity: .35; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes illusSpin { to { transform: rotate(360deg); } }
@keyframes illusSway { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes illusGrow { 0% { transform: scaleY(.5); transform-origin: bottom; } 100% { transform: scaleY(1); transform-origin: bottom; } }
@keyframes illusFadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes illusFadeDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes illusDrop { 0% { transform: translateY(-30px); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
`;
function IllusStyles() {
return ;
}
// Wrapper común — cuadro con fondo y padding consistente
function IllusFrame({ pal, children, viewBox = '0 0 400 280', style }) {
return (
);
}
// Variante oscura (para slides con variant="dark")
function IllusFrameDark({ pal, children, viewBox = '0 0 400 280', style }) {
return (
);
}
// ─── 01 PORTADA — Abrazo cálido entre padre e hijo, cruz al fondo ──────
function IllusPortada({ pal }) {
return (
);
}
// ─── 03 RECAP — Dos caminos: solo vs de la mano ─────────────────────────
function IllusRecap({ pal }) {
return (
{/* Línea divisoria suave */}
{/* IZQ: huérfano caminando solo, sin rumbo */}
SOLO
{/* signos de interrogación flotando */}
?
?
{/* DER: hijo de la mano del Padre, caminando hacia luz */}
DE LA MANO
{/* Sol cálido */}
{/* Camino dorado */}
{/* Padre (más alto) */}
{/* Mano extendida hacia abajo */}
{/* Hijo */}
);
}
// ─── 04 MOTIVACIONES — Dos coronas ──────────────────────────────────────
function IllusMotivaciones({ pal }) {
return (
{/* IZQ: corona terrenal que se desvanece */}
FAMA DE HOMBRES
{/* Corona */}
{/* Mano abajo sosteniéndola */}
{/* Polvo cayendo */}
{/* DER: corona del Reino con luz */}
GLORIA DEL PADRE
{/* Manos abiertas ofreciendo */}
{/* Rayos */}
{[0, 60, 120, 180, 240, 300].map((a, i) => (
))}
);
}
// ─── 05 SANTIDAD — Casa con vela vs candado ─────────────────────────────
function IllusSantidad({ pal }) {
return (
{/* IZQ: candado / cumplimiento */}
POR DISCIPLINA
{/* Reloj/ticks alrededor */}
cumplir · marcar · temer
{/* DER: vela en casa cálida */}
POR DELEITE
{/* Casa silueta */}
{/* Vela dentro */}
{/* Halo cálido alrededor */}
no perder el abrazo
);
}
// ─── 06 DESCANSO — Silla bajo lluvia vs persona bajo árbol ──────────────
function IllusDescanso({ pal }) {
return (
{/* IZQ: silueta vacía + lluvia (vicios) */}
FUERA DE DIOS
{/* Nube */}
{/* Lluvia */}
{[0, 1, 2, 3, 4, 5].map(i => (
))}
{/* Vaso/copa simbolizando vicio */}
{/* DER: persona reclinada bajo árbol con luz pulsante */}
EN LA PRESENCIA
{/* Sol cálido */}
{/* Árbol */}
{/* Persona reclinada */}
);
}
// ─── 07 PRÓJIMO — Plantas: una en sombra, dos creciendo juntas ──────────
function IllusProjimo({ pal }) {
return (
{/* IZQ: planta marchitándose, sombra de la otra */}
SÍNDROME DE CAÍN
{/* Planta envidiosa (la grande, da sombra) */}
{/* Planta marchita debajo de la sombra */}
{/* Suelo */}
{/* DER: dos plantas creciendo juntas hacia el sol */}
HONRA · HERMANDAD
);
}
// ─── 08 ERRORES — Vasija rota: piedras (acusar) vs hilos dorados (kintsugi) ─
function IllusErrores({ pal }) {
return (
{/* IZQ: vasija rota con piedras cayendo */}
ACUSAR
{/* Vasija con grietas */}
{/* Grietas */}
{/* Piedras cayendo */}
{[0, 1, 2, 3].map(i => (
))}
{/* DER: vasija con hilos dorados (kintsugi) */}
RESTAURAR
{/* Hilos dorados que unen */}
{/* Brillos */}
);
}
// ─── 09 AUTORIDAD — Mano del padre protegiendo a hija de enchufe ────────
function IllusAutoridad({ pal }) {
return (
{/* IZQ: rebelde cambiando de iglesias / puerta giratoria */}
INDEPENDENCIA
nunca permanece
{/* DER: protección — mano grande del Padre, niña pequeña, enchufe */}
DISCIPLINA · AMOR
{/* Enchufe peligroso */}
{/* Chispitas */}
{/* Mano grande del padre interponiéndose */}
{/* Halo cálido */}
{/* Niña pequeña (sombra) */}
);
}
// ─── 10 ABBA — Globos de palabra: úsame baja gris, Abba sube dorado ─────
function IllusAbba({ pal }) {
return (
{/* Centro: corazón / persona */}
{/* Palabra "úsame" cayendo gris */}
"úsame"
"no soy digno"
{/* Palabra "Abba" subiendo dorada */}
"Abba"
"soy tu hijo"
{/* Líneas conectoras al centro */}
);
}
// ─── 11 HERENCIA — Moneda en bolsa pequeña vs semilla → árbol con frutos ─
function IllusHerencia({ pal }) {
return (
{/* IZQ: bolsa con moneda — salario */}
SALARIO
$
{/* Moneda cayendo */}
pequeño · finito
{/* DER: semilla → árbol con frutos sobre el mundo */}
HERENCIA
{/* Globo */}
{/* Árbol creciendo */}
{/* Frutos cálidos */}
{/* Sol */}
);
}
// ─── 13 CIERRE — Mesa con velas encendiéndose una a una ─────────────────
function IllusCierre({ pal }) {
return (
{/* Mesa */}
{/* Sillas alrededor (siluetas) */}
{/* Velas (4 — se encienden secuencialmente) */}
{[
{ x: 200, delay: 0 },
{ x: 270, delay: 0.6 },
{ x: 340, delay: 1.2 },
{ x: 410, delay: 1.8 },
].map((v, i) => (
{/* Halo cálido */}
{/* Cuerpo de vela */}
{/* Mecha */}
{/* Llama */}
))}
{/* Texto inferior */}
una mesa abierta · sin máscaras
);
}
// ─── 14 DECLARACIÓN — Cadenas cayendo + corona descendiendo ─────────────
function IllusDeclaracion({ pal }) {
return (
{/* Halo central */}
{/* Corona descendiendo */}
{/* Cabeza inclinada */}
{/* Cadenas rotas cayendo */}
{/* Rayos */}
{[20, 70, 110, 160, 200, 250, 290, 340].map((a, i) => (
))}
);
}
// Export
Object.assign(window, {
IllusPortada, IllusRecap, IllusMotivaciones, IllusSantidad,
IllusDescanso, IllusProjimo, IllusErrores, IllusAutoridad,
IllusAbba, IllusHerencia, IllusCierre, IllusDeclaracion,
});