// reel-b.jsx — Variation B: "DATOS EN MOVIMIENTO" // 20s · 9:16 · kinetic typography, big numbers, data-driven institutional tone. const B_BG = () => { const t = useTime(); // subtle vignette breath const breathe = 0.5 + 0.5 * Math.sin(t * 0.5); return ( <>
{/* faint horizontal hairlines like an institutional report */} {Array.from({ length: 24 }).map((_, i) => ( ))} {/* breathing radial */}
); }; // Persistent chrome — slide counter and ticker bar const B_Chrome = () => { const t = useTime(); // Map current time to "scene" let scene = "01 · El Predio"; if (t > 3.5) scene = "02 · Con qué contamos"; if (t > 7.5) scene = "03 · Cuatro Accesos"; if (t > 11.5) scene = "04 · Precio · Mercado"; if (t > 15.5) scene = "05 · Dos Tesis"; if (t > 18.0) scene = "06 · Contacto"; return ( <>
{scene}
{/* progress bar at bottom */}
ALABASTRO 1 / TEASER · 20S
{Math.floor(t * 10).toString().padStart(3, '0')}
); }; // ── Scene 1 (0 → 3.5): El Predio — 447 m² ─────────────────────────────────── const B_Scene1 = () => ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.4)) / 0.4, 0, 1); const reveal = (d, s = 0.5) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Superficie del terreno
metros cuadrados
USO H3 · ESCRITURA LIMPIA
); }} ); // ── Scene 2 (3.5 → 7.5): Con qué contamos — 6 categorías ──────────────────── const B_CategoryItem = ({ index, label, items, t }) => (
{String(index).padStart(2, '0')}
{label}
{items}
); const B_Scene2 = () => { const cats = [ { label: 'Documentación legal', items: 'Escritura 9,668 · Folio Real 360920 · sin gravámenes' }, { label: 'Trámites municipales', items: 'Dictamen H3 · Alineamiento · 4 Números Oficiales' }, { label: 'Factibilidades', items: 'CFE · CEA (agua + drenaje)' }, { label: 'Estudios técnicos', items: 'Mecánica de suelos · topografía planimétrica' }, { label: 'Trabajo arquitectónico', items: 'Anteproyecto ML-ARQ + MLA · cuadro de áreas' }, { label: 'Estado del predio', items: 'Malla ciclónica · limpieza · predial al corriente' }, ]; return ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.4)) / 0.4, 0, 1); const reveal = (d, s = 0.5) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Con qué contamos
Paquete
completo.
Seis categorías listas para proyecto ejecutivo.
{/* Categories list */}
{cats.map((c, i) => ( ))}
); }} ); }; // ── Scene 3 (7.5 → 11.5): 4 Números Oficiales ─────────────────────────────── const B_Scene3 = () => { const codes = ['1', '1A', '1B', '1C']; return ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.4)) / 0.4, 0, 1); const reveal = (d, s = 0.5) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Cuatro accesos independientes
Números Oficiales
{/* 2x2 grid of N.Of. badges */}
{codes.map((c, i) => { const t = reveal(0.7 + i * 0.22, 0.5); return (
N.OF.
{c}
); })}
5 consultorios + lab  ·  o 3 residencias
); }} ); }; // ── Scene 4 (11.5 → 15.5): Precio vs mercado ──────────────────────────────── const B_PriceRow = ({ label, value, highlight, t, source }) => (
{label}
{source &&
{source}
}
{value}
); const B_Scene4 = () => ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.4)) / 0.4, 0, 1); const reveal = (d, s = 0.4) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Precio vs. mercado Milenio III
$8,000 / m²
Bajo la mediana — con el paquete de trámites incluido.
); }} ); // ── Scene 5 (15.5 → 18.0): Dos tesis pill summary ─────────────────────────── const B_Scene5 = () => ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.3)) / 0.3, 0, 1); const reveal = (d, s = 0.5) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Dos tesis
{/* Two stacked pills */}
{/* Médica */}
TRACK A
Torre Médica
Yield bruto 9% · 5 consultorios + lab
{/* Resi */}
TRACK B
Residencias Boutique
Margen 17-30% · 3 unidades · 274 m² c/u
); }} ); // ── Scene 6 (18.0 → 20.0): CTA ────────────────────────────────────────────── const B_Scene6 = () => ( {({ localTime, duration }) => { const reveal = (d, s = 0.5) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <>
Alabastro 1
Venta directa con propietario
alabastro1.com.mx
); }} ); function ReelB(props) { return ( ); } Object.assign(window, { ReelB });