); // ── Map of Milenio III ────────────────────────────────────────────────────── // Stylized — gold pin at Alabastro 1 in center, labelled landmarks around. // `zoom`: 1 = wide (shows roads), 2.0 = tight in on predio. // `lineProgress`: 0→1 controls how many connection lines are drawn. const C_Map = ({ zoom = 1, lineProgress = 0, pulse = 0, labelOpacity = 1 }) => { // Map coordinate space: 1080x1920 viewBox // Alabastro 1 pin at center (540, 960) // Landmarks placed around it const landmarks = [ { id: 'm1', x: 760, y: 880, label: 'Torre Momentum I', sub: '200 m', side: 'R' }, { id: 'm3', x: 830, y: 1040, label: 'Torre Momentum III', sub: '350 m', side: 'R' }, { id: 'm5', x: 900, y: 1200, label: 'Torre Momentum V', sub: '500 m', side: 'R' }, { id: 'lab', x: 360, y: 1230, label: 'Lab Corregidora', sub: '300 m', side: 'L' }, { id: 'arcos', x: 220, y: 720, label: 'Calz. de los Arcos', sub: '500 m', side: 'L' }, { id: 'bq', x: 720, y: 600, label: 'Av. B. Quintana', sub: '1 km', side: 'R' }, ]; const pinX = 540, pinY = 960; // line draw — each line gets a slice of [0,1] const lineT = (i) => clamp(lineProgress * landmarks.length - i, 0, 1); // Pulse rings const pulseR1 = 60 + pulse * 80; const pulseR2 = 60 + ((pulse + 0.5) % 1) * 80; const pulseO1 = 1 - pulse; const pulseO2 = 1 - ((pulse + 0.5) % 1); return (

{/* Labels (positioned in DOM for crisp text) */}

ALABASTRO 1

447 m² · H3

{landmarks.map((l, i) => { const t = lineT(i); return (

{l.label}

{l.sub}

); })}

); }; // ── Scene 1 (0 → 4): Locate it ────────────────────────────────────────────── const C_Scene1 = () => ( {({ localTime, duration }) => { const exitOp = 1 - clamp((localTime - (duration - 0.4)) / 0.4, 0, 1); const reveal = (d, s = 0.6) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); // Zoom slowly from wide out to slightly closer const zoom = 0.85 + 0.2 * Easing.easeInOutCubic(clamp(localTime / duration, 0, 1)); const pulse = (localTime * 0.7) % 1; return ( <>

{/* Top eyebrow */}

Querétaro · Milenio III

{/* Big intro */}

Aquí.

Una microzona ya consolidada.

); }} ); // ── Scene 2 (4.0 → 9.5): Draw the corredor médico ─────────────────────────── const C_Scene2 = () => ( {({ 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)); const zoom = 1.05 - 0.05 * (localTime / duration); const pulse = (localTime * 0.7) % 1; const lp = Easing.easeOutCubic(clamp((localTime - 0.5) / 3.5, 0, 1)); return ( <>

{/* Bottom statement */}

Corredor médico

Tres torres médicas ya operando

Momentum I, III, V · laboratorios · a 200-700 m del predio

); }} ); // ── Scene 3 (9.5 → 13.5): Predio photo ────────────────────────────────────── const C_Scene3 = () => ( {({ localTime, duration }) => { const enterT = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1)); const exitOp = 1 - clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const reveal = (d, s = 0.6) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); const kb = 1.05 + 0.1 * (localTime / duration); return ( <>

{/* gradient overlay */}

{/* Top card */}

El predio

447 m² en una esquina premium del fraccionamiento.

{/* Bottom stats row */}

{[ { v: '14 m', l: 'altura máx.' }, { v: '4', l: 'niveles' }, { v: 'N/NO', l: 'vista' }, { v: '5 m', l: 'roca' }, ].map((s, i) => (

{s.v}

{s.l}

))}

); }} ); // ── Scene 4 (13.5 → 17.5): Two paths quick beats ──────────────────────────── const C_Scene4 = () => ( {({ 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 ( <>

Dos rutas de inversión

Una propiedad,

dos modelos.

{/* Médica card */}

TRACK A

Torre Médica

Yield bruto 9% · 5 consultorios + lab

{/* Resi card */}

TRACK B

Residencias Boutique

Margen 17-30% · 3 unidades de 274 m²

Paquete completo · listo para ejecutivo

); }} ); // ── Scene 5 (17.5 → 22.0): CTA ────────────────────────────────────────────── const C_Scene5 = () => ( {({ localTime, duration }) => { const reveal = (d, s = 0.6) => Easing.easeOutCubic(clamp((localTime - d) / s, 0, 1)); return ( <> {/* small map echo behind, very subtle */}

{/* dark overlay */}

Venta directa · sin intermediarios

Alabastro

$3,577,760 MXN

$8,000 / M² · 447 M²

alabastro1.com.mx

); }} ); // Persistent chrome const C_Chrome = () => { const t = useTime(); const hide = t > 9.5 && t < 13.5; // hide during photo scene return ( <>

20°35'57.9"N · 100°21'50.9"W

); }; function ReelC(props) { return ( ); } Object.assign(window, { ReelC });