// reel-a.jsx — Variation A: "DOS RUTAS" // 22s · 9:16 · narrative: open → predio → split reveal → numbers → converge → CTA const A_BG = () => { const t = useTime(); const x = 50 + Math.sin(t * 0.25) * 4; const y = 38 + Math.cos(t * 0.2) * 3; return (
); }; // ── Scene 1 (0 → 4.0): Title card ──────────────────────────────────────────── const A_Scene1 = () => ( {({ localTime, duration }) => { const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - exitT; const reveal = (delay, span = 0.7) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); const lineGrow = Easing.easeInOutCubic(clamp((localTime - 0.2) / 1.0, 0, 1)); return ( <> {/* Eyebrow */}
Milenio III · Querétaro
{/* Gold hairline */}
{/* Big serif title */}
Alabastro
{/* Roman numeral */}
1
{/* Subtitle */}
Predio shovel-ready · 447 m²
{/* Tag pill */}
Una propiedad · dos rutas
); }} ); // ── Scene 2 (4.0 → 7.5): Predio image + facts ─────────────────────────────── const A_Scene2 = () => ( {({ localTime, duration }) => { const enterT = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1)); const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - exitT; const kb = 1 + 0.08 * (localTime / duration); const reveal = (delay, span = 0.6) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); return ( <> {/* Full-bleed photo */}
{/* Bottom-up dark gradient */}
{/* Top tag */}
El predio
{/* Bottom stats */}
USO H3 · 4 N. OFICIALES · ESCRITURA LIMPIA
A 500 m de Calzada de los Arcos · 200 m del corredor médico
); }} ); // ── Scene 3 (7.5 → 11.0): The split — two paths revealed ──────────────────── const A_Scene3 = () => ( {({ localTime, duration }) => { const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - exitT; const splitT = Easing.easeInOutCubic(clamp(localTime / 0.8, 0, 1)); const reveal = (delay, span = 0.55) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); return ( <> {/* Top half — teal (médica) — slides down */}
{/* Bottom half — gold (residencial) — slides up */}
{/* Gold hairline divider */}
{/* TOP — Torre Médica label */}
Track A
Torre Médica
Boutique
{/* BOTTOM — Residencias label */}
Track B
Residencias
Verticales
{/* Center "OR" disc */}
ó
); }} ); // ── Scene 4 (11.0 → 15.0): Numbers face-off ───────────────────────────────── const A_StatRow = ({ value, label, color, side, t }) => (
{value}
{label}
); const A_Scene4 = () => ( {({ localTime, duration }) => { const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - exitT; const reveal = (delay, span = 0.5) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); return ( <> {/* Header */}
Las cifras
Dos tesis de valor
{/* Center divider */}
{/* Left column — Torre Médica */}
Track A · Médica
} label="Yield bruto" color={PALETTE.teal} side="L" t={reveal(0.5)}/> } label="Consultorios + lab" color={PALETTE.teal} side="L" t={reveal(0.9)}/> $ K/mes} label="Renta consultorio" color={PALETTE.teal} side="L" t={reveal(1.3)}/>
{/* Right column — Residencias */}
Track B · Resi
} label="Margen máx." color={PALETTE.gold} side="R" t={reveal(0.7)}/> } label="Residencias" color={PALETTE.gold} side="R" t={reveal(1.1)}/> m²} label="Por unidad" color={PALETTE.gold} side="R" t={reveal(1.5)}/>
); }} ); // ── Scene 5 (15.0 → 18.5): Convergence statement ───────────────────────────── const A_Scene5 = () => ( {({ localTime, duration }) => { const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - exitT; const reveal = (delay, span = 0.7) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); return ( <> {/* Big quote */}
Una propiedad.
Dos formas de generar valor.
); }} ); // ── Scene 6 (18.5 → 22.0): Price + CTA ────────────────────────────────────── const A_Scene6 = () => ( {({ localTime, duration }) => { const reveal = (delay, span = 0.6) => Easing.easeOutCubic(clamp((localTime - delay) / span, 0, 1)); return ( <> {/* Eyebrow */}
Venta directa
{/* Price */}
$
MXN · $8,000 / m²
{/* Card */}
Paquete completo
Escritura · Dictamen H3 · 4 N. Of. · Factibilidades · Anteproyecto
{/* Bottom CTA */}
alabastro1.com.mx
); }} ); // Persistent gold hairline frame const A_Chrome = () => { const t = useTime(); // hide during scene 2 (photo) and scene 3 (split) const hidden = t > 4.0 && t < 11.0; return ( <> ); }; function ReelA(props) { return ( ); } Object.assign(window, { ReelA });